Vuex簡單入門實例

　　對不少想入門Vue的新人來講，常常看到那個大神開源的dome,什麼全家桶的，Vuex看上去是個高大上的東西。官方文檔解釋的很專業化，簡單說就是不通俗。對咱們這些小白來講就是很難一會兒理解。

　　這篇是做者學習小記，若有什麼錯誤的地方，還請不吝賜教！

　　Vuex是狀態管理模式，這個怎麼理解呢？

　　首先，Vuex是爲了處理複雜數據邏輯而開發出來的，目的固然是爲了數據，而這數據是共享的，不經過的模塊可能須要不一樣或者相同的數據。那麼咱們就須要獲得不一樣狀態下的數據。

　　咱們知道Vuex有四大模塊state、getters、mutations、actions，他們就是管理不一樣的數據狀態信息。

　　state: 存儲初始化數據,能夠自定義數據,能夠看作初始狀態；

　　getters: 從state中獲取想要的數據，而mutations對數據的操做都是基於它的,能夠看作數據提取狀態；

　　mutations: 對getters中的數據進行所需處理，便可以對其從新賦值，觸發它須要使用commit方法，能夠看作待處理狀態

　　actions: 使用commit方法，異步觸發mutations的函數進行數據的賦值和更新,能夠看作待觸發狀態

　　1、接下來上代碼：

　　項目結構（截取）（手腳架）：

　　

　　2、首先須要安裝vue 和 vuex

　　store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

    const store = new Vuex.Store({
        // 首先聲明一個狀態 state，初始化狀態
        state: {
            count: 0
        },

        // 獲取數據狀態信息
        getters: {
           count: state => state.count
        },

        // 對獲取的數據狀態進行相應的處理,可傳參，處理的後的數據狀態會返回給getters，待處理狀態
        mutations: {
            increment (state, m) {
                state.count += m
            },
            decrement (state, n) {
                state.count -= n
            }
        },


        // actions 註冊並觸發處理函數,能夠傳參，當這個函數被觸發時，將狀態提交到mutations中處理， 正在處理狀態
        actions: {
            increment: ({commit}, m) => commit('increment', 5),  //在actions中通常作數據請求,再使用commit方法，這裏直接賦值寫死
          decrement: ({commit}, n) => commit('decrement', 3)
        }
    })

    // 將store 暴露出去
    export default store

　　3、main.js中，注意加上全局store,  store導入時簡寫注意看項目結構

　　

　　4、做者使用的手腳架自動構建的，因此router直接配置到了組件hello，我直接在hello組件中輸出數據。

　　hello.vue中

　　

　　5、最後編譯運行以下：