vuex1.0你不知道的簡單寫法

在一些小項目中其實能夠不用vuex的，可是在一些大型項目中，vuex必然是必殺技，能夠使你方便使用，方便跟蹤視圖的狀態。
一、編寫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
})複製代碼

二、app中的vuex
須要在啓動的時候也就是vue-cli腳手架中的app.vue中把store注入大根目錄，一次注入終身受用。如圖

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;
})複製代碼

四、子組件中使用

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';//修改模塊變量的值複製代碼

五、測試實例
一、google瀏覽器的控制檯

測試非模塊化變量

2.測試模塊化變量

模塊化測試

• 能夠看出，dispatch會觸發方法名相同的函數
• 相對來講，vuex比window定義的數據更有模塊性和追蹤性。有問題能夠隨時交流。