1、编写store对象
define([], function() {
var Vue = require('vue')
var Vuex = require('src/libs/vuex/vuex.js')
Vue.use(Vuex)
var modelA= require('src/libs/vuex/modelA.js')
// 应用初始状态
var state = {
count: 2
}
// 定义所需的 mutations
var mutations = {
INCREMENT: function(state) {
state.count++
},
DECREMENT: function(state) {
state.count--
}
}
//这一块可以引入模块对象
var store = new Vuex.Store({
state: state,
mutations: mutations,
modules: {
test: modelA
}
})
// 创建 store 实例
return store
})
2、app中的vuex
vuex
用require引入
store，并注入到vue的根组件3、modelA书写方式
define([], function() {
var modelA = {
state:{
name: 3
},
// 定义所需的 mutations
mutations:{
INCREMENT: function(state) {
state.name++
},
DECREMENT: function(state) {
state.name--
}
}
}
return modelA;
})
4、子组件中使用
vuex: {
getters: {
count: state => state.count//变量必须放这里，这里也可以是函数，当过滤器用
},
actions: {
increment:function(dispatch){
dispatch.dispatch('INCREMENT')//触发修改变量
},
decrement:function(dispatch)
{
dispatch.dispatch('DECREMENT')
}
}
},
created: function() {
},
同时也可以这样用
this.$store.dispatch('DECREMENT');//触发方法
this.$store.commit('DECREMENT');//触发方法vuex2,在actions里面触发的方法
this.$store.state.count='ssss';//修改变量的值
this.$store.state.test.name='ssss';//修改模块变量的值
5、测试实例
1、google浏览器的控制台
测试非模块化变量
2.测试模块化变量
模块化测试
- 可以看出，dispatch会触发方法名相同的函数
- 相对来说，vuex比window定义的数据更有模块性和追踪性。有问题可以随时交流。
