vuex所有核心概念完整解析State Getters Mutations Actions

vuex是解決vue組件和組件間相互通信而存在的，vuex理解起來稍微複雜，但一旦看懂則即為好用：

安裝：

npm install --save vuex

引入

import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)

vuex的幾個參數的介紹

State 儲存初始化數據

Getters 對State 裡面的數據二次處理（對數據進行過濾類似filter的作用）比如State返回的為一個對象，我們想取對象中一個鍵的值用這個方法

Mutations 對數據進行計算的方法全部寫在裡面（類似computed） 在頁面中觸發時使用this.$store.commit("mutationName") 觸發Mutations方法改變state的值

Actions 處理Mutations中已經寫好的方法 其直接觸發方式是 this.$store.dispatch(actionName)

我們先不急著了解更多先列印下Vuex

console.log(Vuex) //Vuex為一個對象裡面包含
Vuex ={
Store:function Store{},
mapActions:function{}, // 對應Actions的結果集
mapGetters:function{}, //對應Getters的結果集
mapMutations:function{}, //對應Mutations的結果集
mapState:function{}, //對應State的結果集
install:function install{}, //暫時不做講解
installed:true //暫時不做講解
}
//如果我們只需要裡面的State時我們可以這樣寫
import { mapState } from "vuex";
import { mapGetters, mapMutations } from "vuex"; //如果需要引用多個時用這種方式處理

反覆看上面的內容是不是就豁然開朗了接下來我們進行依次舉例和用官方的語言描述

State

State負責存儲整個應用的狀態數據，一般需要在使用的時候在跟節點注入store對象，後期就可以使用this.$store.state直接獲取狀態

//store為實例化生成的
import store from "./store"

new Vue({
el: "#app",
store,
render: h => h(App)
})

這個store可以理解為一個容器，包含著應用中的state等。實例化生成store的過程是：

//./store文件
const store = new Vuex.Store({
state: { //放置state的值
count: 0,
strLength:"abcd234"
},
getters: { //放置getters方法
strLength: state => state.aString.length
},
mutations: { //放置mutations方法
mutationName(state) {
//在這裡改變state中的數據
state.count = 100;
}
},
// 非同步的數據操作
actions: { //放置actions方法
actionName({ commit }) {
//dosomething
commit("mutationName")
},
getSong ({commit}, id) {
api.getMusicUrlResource(id).then(res => {
let url = res.data.data[0].url;

})
.catch((error) => { // 錯誤處理
console.log(error);
});
}
}
});
export default store;

後續在組件中使用的過程中，如果想要獲取對應的狀態你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數將state映射到計算屬性中去，如

import {mapState} from "vuex"

export default { //組件中
computed: mapState({
count: state => state.count
})
}

Getters

有些狀態需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函數mapGetters將其映射到本地計算屬性中去。

在組件中使用方式

import {mapGetters} from "vuex"

export default {
computed: mapGetters([
"strLength"
])
}

Mutations

Mutations的中文意思是「變化」，利用它可以更改狀態，本質就是用來處理數據的函數，其接收唯一參數值state。store.commit(mutationName)是用來觸發一個mutation的方法。需要記住的是，定義的mutation必須是同步函數，否則devtool中的數據將可能出現問題，使狀態改變變得難以跟蹤。

在組件中觸發：

export default {
methods: {
handleClick {
this.$store.commit("mutationName")
}
}
}

或者使用輔助函數mapMutations直接將觸發函數映射到methods上，這樣就能在元素事件綁定上直接使用了。如：

import {mapMutations} from "vuex"
export default {
methods: mapMutations([
"mutationName"
])
}

Actions

Actions也可以用於改變狀態，不過是通過觸發mutation實現的，重要的是可以包含非同步操作。其輔助函數是mapActions與mapMutations類似，也是綁定在組件的methods上的。如果選擇直接觸發的話，使用this.$store.dispatch(actionName)方法。

在組件中使用

import {mapActions} from "vuex"
//我是一個組件
export default {
methods: mapActions([
"actionName",
])
}

Plugins

插件就是一個鉤子函數，在初始化store的時候引入即可。比較常用的是內置的logger插件，用於作為調試使用。

//寫在./store文件中
import createLogger from "vuex/dist/logger"
const store = Vuex.Store({
...
plugins: [createLogger()]
})

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！