淺談vuex使用方法（vuex簡單實用方法）

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

以上是官方文檔對xuex的定義，對於vuex的官方文檔講的很詳細，可是對於一個前端菜鳥來講，表示看不懂，看完事後很懵逼（好比小胖紙）。基礎知識太薄弱，理解起來很費勁。可是有想用vuex作狀態管理怎麼辦，只有想辦法咯，慢慢磨出來的。

如下簡述vuex的state，mutations，actions怎麼配合使用，造成一個完整的流程，很簡單的一個功能實現。

目錄結構：

主要經過配合使用store裏面的 action Index mutation-types mutation.js的使用。

 

isSelect 初始狀態爲 false ，點擊肯定isSelect = true ， 點擊取消 isSelect  = false ；

第一步： Index.js  

在state裏面申明一個變量  is_select ，做爲狀態管理

 

import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutations";
import actions from "./action";
import getters from "./getters";

Vue.use(Vuex)
//全部的狀態樹
const state = {
    is_select: false
};

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})

第二步： 在 mutation.js  書寫狀態管理的邏輯函數

export default {
    /**
     * 書寫全部的狀態管理邏輯函數
     * Mutations必須是同步函數
     * @constructor
     */
    CHECH_SELECT(state,res){
        //寫業務邏輯
        state.is_select = res;
        console.log(res)
    }
}

 第三步： 在 mutation-types.js  把在 mutation.js中寫的函數拋出

//配置vuex調用的Mutations邏輯
export const CHECH_SELECT = 'CHECH_SELECT'

 第四步： 在 action.js  從定義的Mutations邏輯函數中取須要用到的邏輯函數

import {CHECH_SELECT} from "./mutation-types.js"; //從定義的Mutations邏輯函數中取須要用到的邏輯函數
/**
 *Action 相似於 mutation，不一樣在於：
 *Action 提交的是 mutation，而不是直接變動狀態。
 * Action 能夠包含任意異步操做。
 */
export default {
    async check_select({commit}, is_select) {
        commit(CHECH_SELECT, is_select)
    }
}

經過commit提交mutation來改變state中的 is_select 值的變化

 第五步：在 xxx.vue中實現點擊肯定取消，來觸發改變 is_select  的值 

 methods:{
            commits(){
                const _self = this;
                _self.$store.dispatch("check_select",true)
                        .then(function () {
                            _self.isSelect = _self.$store.state.is_select;
                        })
                
            },
            cancels(){
                const _self = this;
                _self.$store.dispatch("check_select",false)
                        .then(function () {
                            _self.isSelect = _self.$store.state.is_select;
                        })
            },
}

通過五個步驟，就能夠完成一個炒雞簡單的經過vuex來進行的狀態管理，以上僅僅是爲了實現功能，想說出個因此然，但有理解太淺，只能實現功能，不清楚爲何。接下來在深刻去了解，仔細品下官方文檔。