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()]
})