基于vue-cli的vue项目之vuex的使用4-------moudles分块
2017-09-22 09:13
751 查看
按照官方文档,就是为了避免代码太长了。所以使用了moudle
1.store.js//配置仓库,第五道第二十六为一个模块。第二十七到四十八为一个模块,在第四十九到五十四行抛出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const moudlesa = {
namespaced:true,
state: {
count: 0
},
mutations: {
incrementa(state, n) {
console.log(n);
state.count += n.amout;
}
},
actions: {
incrementa(context, m) {
setTimeout(() => {
context.commit({
type: "incrementa",
amout: m.amout
})
}, 1000)
}
}
}
const moudlesb = {
namespaced:true,
state: {
count: 0
},
mutations: {
incrementb(state, n) {
console.log(n);
state.count += n.amout;
}
},
actions: {
incrementb(context, m) {
setTimeout(() => {
context.commit({
type: "incrementb",
amout: m.amout
})
}, 1000)
}
}
}
const store = new Vuex.Store({
modules: {
a: moudlesa,
b: moudlesb
}
})
//export default store;
export default store;
2.main.js//配置store的路径,在第六十九行使用store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
},
})
3app.vue//在组件中使用//在第九十到第九十六提交a模块的数据,第九十七到一百零二行提交b模块的数据
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="clickme">点击调用commit</button>
<button @click="clickme1">点击调用dispatch</button>
<span>{{$store.state.a.count}}</span><span>{{$store.state.b.count}}</span>
</div>
</template>
<script>
export default {
name: 'app',
data() {},
methods: {
clickme: function() {
this.$store.commit({
type: "a/incrementa",
amout: 180
});
alert(this.$store.state.a.count)
},
clickme1: function() {
this.$store.dispatch({
type: "b/incrementb",
amout: 180,
});
}
},
}
</script>
<style>
</style>
1.store.js//配置仓库,第五道第二十六为一个模块。第二十七到四十八为一个模块,在第四十九到五十四行抛出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const moudlesa = {
namespaced:true,
state: {
count: 0
},
mutations: {
incrementa(state, n) {
console.log(n);
state.count += n.amout;
}
},
actions: {
incrementa(context, m) {
setTimeout(() => {
context.commit({
type: "incrementa",
amout: m.amout
})
}, 1000)
}
}
}
const moudlesb = {
namespaced:true,
state: {
count: 0
},
mutations: {
incrementb(state, n) {
console.log(n);
state.count += n.amout;
}
},
actions: {
incrementb(context, m) {
setTimeout(() => {
context.commit({
type: "incrementb",
amout: m.amout
})
}, 1000)
}
}
}
const store = new Vuex.Store({
modules: {
a: moudlesa,
b: moudlesb
}
})
//export default store;
export default store;
2.main.js//配置store的路径,在第六十九行使用store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
},
})
3app.vue//在组件中使用//在第九十到第九十六提交a模块的数据,第九十七到一百零二行提交b模块的数据
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="clickme">点击调用commit</button>
<button @click="clickme1">点击调用dispatch</button>
<span>{{$store.state.a.count}}</span><span>{{$store.state.b.count}}</span>
</div>
</template>
<script>
export default {
name: 'app',
data() {},
methods: {
clickme: function() {
this.$store.commit({
type: "a/incrementa",
amout: 180
});
alert(this.$store.state.a.count)
},
clickme1: function() {
this.$store.dispatch({
type: "b/incrementb",
amout: 180,
});
}
},
}
</script>
<style>
</style>
相关文章推荐
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之路由1--最基本的使用
- 基于vue-cli的vue项目之axios的使用6--配置axios
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- 基于vue-cli的vue项目之vuex的使用2
- 基于vue-cli的vue项目之axios的使用1--准备工作
- 基于vue-cli的vue项目之vuex的使用2-------commit参数
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- 使用 vue-cli 可以快速创建 vue 项目
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- vue-cli 构建的项目中如何使用 Less