如何使用vuex？vuex的具體使用步驟（詳）

使用vuex，首先得了解它是用來干什么的？===>實現數據共享的。

第一步：在項目中引入vuex

①在項目目錄下，使用npm引入vuex：npm install vuex --save

②在項目的src中創建一個以store命名的文件夾，在store下創建一個以index.js命名的文件

③在index.js文件中創建一個store

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        //要想修改這里面的值，唯一的方法是提交mutations
    },
    getters:{
        //類似computed
    },
    mutations:{
        //類似methods，但不能放異步方法
    },
    actions:{
        //類似methods，可實現異步方法（實際調用了mutations中的方法來實現）
    }

})

④在main.js中引入store

第二步：創建和使用共享的數據（可動態變化）

1. 簡單使用共享數據

　　（1）直接使用state中的數據

　　　　例：在store下的index.js中state里創建變量count，就可在任意組件中使用$store.state.count。

　　（2）使用getters

　　　　getters類似於computed，也可計算屬性，通過$store來使用。

2. 改變數據

文檔中原話：更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。

小白白：那具體是怎么改變state中的變量呢？

阿柒：嘻嘻~(●'◡'●)，👇請看。

例：在mutations中定義addOne函數，在組件中使用$store.commit來喚醒mutations中的addOne方法來改變count的值。

***注意：Mutation 必須是同步函數，即不可在mutations中使用 setTimeout 或 axios 等異步函數。

3. 使用異步方法

小白白：那我就是需要使用到異步方法怎么辦呢？

阿柒：喲西，不急~(●'◡'●)，👇可以滴~。雖然mutations不能實現異步，但在actions中實現異步時還是需要mutations中的方法來改變state中的變量的。

例：通過$store.dispatch觸發actions中的方法jiayi，jianyi方法通過context提交一個mutation來喚醒mutations中的subOne方法來改變count的值。

 

 上述講解的案例都是使用同一個項目來舉例的。這是一個很簡單的小項目，通過點擊不同組件中的按鈕來控制同一個數據的顯示，具體效果圖如下所示：

想要這個小項目完整源碼的，可以加扣扣：[e-mail]，歡迎指正批評與交流。