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

西安小哥發表於2017-04-10
Vue

在一些小專案中其實可以不用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注入大根目錄，一次注入終身受用。如圖

vuex1.0你不知道的簡單寫法
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瀏覽器的控制檯

vuex1.0你不知道的簡單寫法
測試非模組化變數

2.測試模組化變數

vuex1.0你不知道的簡單寫法
模組化測試

  • 可以看出，dispatch會觸發方法名相同的函式
  • 相對來說，vuex比window定義的資料更有模組性和追蹤性。有問題可以隨時交流。

相關文章