一，Vuex 是什么？有什么用

Vuex是一個輔助于 Vue 的狀態資料管理庫，用于處理Vue開發程序中的重復資料過于冗余無意義從而拖累代碼運行效率的一種方案，可以將在同一個入口檔案管理下的所有重復的資料、計算、函式定義到一個 store.js(叫什么名字都可以的哈) 的檔案中，并且所有受到同一個入口檔案管理的組件檔案都可以直接訪問到其中定義的

資料，

二，Vuex 的特點

Vuex 的一個最大特點就是他是一個公共的回應式資料 , 就是說當其中的資料改變時,那么呼叫此資料的組件也會隨之進行更新操作

例如：token屬性是我已經在不同檔案中獲取的同一個Vuex 屬性

那么我在 A.vue 檔案中 console.log(token) 與在 B.vue 中的 console.log(token) 列印出來的是同一個值，并且如果在其他檔案中對直接 token 進行資料修改，其他的檔案會同時進行更新token的資料

比如在 C.vue 中讓token的值改為了 "我不是token,是個人" ，那么在 A.vue 和 B.vue 檔案中列印出來的token都會是 ： "我不是token,是個人"

三，Vuex 中的資料及函式該如何定義

Vuex主要分為四部分，分別是：基礎資料 state, 同步函式 mutations，異步函式 actions，計算屬性 getters，

1.基礎資料 state

類似于data中定義的資料，字串、數字、函式、物件等等資料都在這里定義，用來儲存公共共享的資料源,此處定義的資料僅可以被 mutations 更改

(1) 資料互通

第一種定義方法可以在一個組件改變Vuex中定義的資料源時,那么其他復用過的同一個資料的組件也會同時進行改變更新 ,這是因為組件復用的時候是 以物件的形式進行宣告, 參考型別資料會在堆區開拓空間,并在堆疊區存入一個堆區的地址,所以在改變資料的時候 會直接通過堆疊區地址找到堆區資料進行更改 其他組件進行獲取資料時就會通過堆疊區地址獲取同一個資料

因此就可以使一個資料成為一個所有組件都可以訪問復用的公共資料源,但因為復雜資料型別的特點,只開辟了一片空間,大大節省了性能和記憶體

第一種注冊方式如下:

        // 注冊vuex  公共資源
        const store = new Vuex.Store({
            // state:   儲存共享的資料源,僅可以被 mutations 更改
            state: {
                text: '我想做個好人'，
                obj:{
                    text:'對不起，我是警察'
                }
            }
        })

如上,在注冊好的vuex中以物件的形式宣告 state,并且以鍵值對的形式進行宣告

(2) 資料復用互不影響

但是如果vuex的資料在需要多次復用,但是用的時候又需要資料相對獨立,不得互相影響的時候,此時就可以按照如下寫法進行宣告,

 state: () => ({
    // vuex中的模塊也是可能進行復用的
    // 為了復用的時候 互相不影響 采用同樣的函式執行 return物件的形式
    token: getToken() || '',
    userInfo: {}
  })

2.同步函式 mutations

唯一可以同步修改 state的屬性的地方,所有同步改動 state 中資料的操作,都要經過 mutations 中定義的函式進行間接操作,例如我想將 state中的num改動為10,那么我不可以直接操作改動num,需要經過如圖的 changeNum 這個函式進行操作

// 注冊vuex  公共資源
const store = new Vuex.Store({
    // state:   儲存共享的資料源,僅可以被 mutations 更改
    state: {
        num: 0
    },

    // mutations:  同步函式,`唯一` 可以 `同步` 修改 state的 地方
    mutations: {
        // 定義的同步函式
        changeNum( state , '形參' ) { 
            state.num = 10
        }
    }
})

在 mutations 中定義的所有函式的形參中，第一個引數為 state 物件，可以通過 state 訪問到其中的資料，從第二個引數開始往后，所有的形參都為呼叫函式所傳傳遞的引數，用以方便操作函式，

mutations 中所定義的函式為同步函式，即被呼叫則立即直接被主執行緒執行，不會進入任務佇列，在作業中主要負責的功能就是操作 state 中的資料，

而在當前 Vuex 中要想訪問到 mutations 中的方法,需要通過 commit 來查找到其中的同步函式名,具體操作請看 異步函式 action

3.異步函式 action

action 是一個異步函式書寫的位置,但是涉及到控制 state 中的資料時,不可以直接進行操作改動,必須通過呼叫 mutations 中的方法來進行間接改動

例如: state 中定義了 num = 1, 如果我想讓他在 3秒 后變為 10, 就需要如圖操作

// 注冊vuex  公共資源
const store = new Vuex.Store({
    // state:   儲存共享的資料源,僅可以被 mutations 更改
    state: {
        num: 1
    },

    // mutations:  同步函式,`唯一` 可以 `同步` 修改 state的 地方
    mutations: {
        numChange(state,newNum) { 
            state.num = newNum
        }
    },

    // actions: 異步函式,異步的修改 state，但其不能直接改，最終必須 commit 到指定 mutations 中
    actions: {
        setNum(store) {
            setTimeout(() => {
                // commit 用來訪問 mutations 中的同步函式
                store.commit('numChange',10)
            }, 3000);
        }
    }
})

如圖,在 action 中, 定義了一個異步函式為 setNum,他的第一個引數默認為當前 Vuex 根物件,通過 store 中的 commit 可以訪問到 mutations 中定義的同步函式,而異步的操作則在當前函式內進行撰寫, 更改數值的時候進行呼叫

格式為 : store.commit("同步函式名",傳遞的引數)

第一個引數默認為根物件,之后的引數都為傳遞的實參

4.計算函式 getters

getters是 Vuex 的計算屬性,以 state資料源 為資料計算而得到結果,類似computed、優勢帶快取

定義方法如下:

格式為: return 計算結果

第一個引數默認為 state

const store = new Vuex.Store({
    // state:   儲存共享的資料源,僅可以被 mutations 同步更改
    state: {
        num: 50
    },

    // getters: vuex 的計算屬性,資料源 計算而得到，類似computed、優勢帶快取
    getters: {
        changeNum(state) {
            const newNum = state.num + 10
            return  newNum 
        }
    }
})

四，組件訪問 Vuex 各項資料函式的方法

首先要在入口檔案中 掛上Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

之后在需要使用的組件中進行呼叫，呼叫方法分為 直接呼叫 和 映射使用

state、getters 都是 映射 在 組件 的 computed 中

mutations、actions 都是 映射 在 組件 的 methods 中

1. state 的呼叫

// 直接呼叫：

this.$store.state.變數名

// 映射使用 mapState

映射分為物件和陣列，物件可以更改映射在當前頁面的屬性名

import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['state變數名']),// 不能改名
        ...mapState({ // 能改名
            留在原地計算屬性名: 'state中變數名'
        })
    }
}

2. mutations 的呼叫

// 直接呼叫：

 this.$store.commit('mutations中的函式名', 傳值)

// 映射使用 mapMutations

import { mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations(['mutations中函式名'])
    }
}

3. actions 的呼叫

// 直接呼叫：

this.$store.dispatch('actions中的函式名', 傳值)

// 映射使用 mapActions

import { mapActions } from 'vuex'
export default {
    methods: {
        ...mapActions(['actions函式名'])
    }
}

4. getters 的呼叫

// 直接呼叫

this.$store.getters.計算屬性的名字

// 映射使用 mapGetters

import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters(['getters中計算屬性的名字'])
    }
}

// 分模塊 呼叫方法

// state
this.$store.state.模塊名.變數名
...mapState("模塊名", ['變數名'])

// mutations
this.$store.commit("模塊名/mutations里的函式名", 具體值)
...mapMutations("模塊名", ['mutations里方法名'])

// actions
this.$store.dispatch("模塊名/actions里的函式名", 具體值)
...mapActions("模塊名", ['actions里方法名'])

// getters
this.$store.getters['模塊名/計算屬性名']
...mapGetters("模塊名", ['getters里計算屬性名'])