vuex1.0你不知道的简单写法-白红宇

在一些小项目中其实可以不用vuex的，但是在一些大型项目中，vuex必然是必杀技，可以使你方便使用，方便跟踪视图的状态。

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

需要在启动的时候也就是vue-cli脚手架中的app.vue中把store注入大根目录，一次注入终身受用。如图

vuex

用require引入

store，并注入到

vue的根组件。如果想要实现模块化状态控制，则参考以下3。

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定义的数据更有模块性和追踪性。有问题可以随时交流。