淺談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來進行的狀態管理，以上僅僅是為了實現功能，想說出個所以然，但有理解太淺，只能實現功能，不清楚為什么。接下來在深入去了解，仔細品下官方文檔。