1 vuex簡介

vuex 是 Vue 配套的 公共數據管理工具，它可以把一些共享數據，保存到 vuex 中，方便整個程序中的任何組件直接獲取或修改我們的公共數據；
Vuex是為了保存組件之間共享數據而誕生的，如果組件之間有要共享數據，可以直接掛載到vuex中，而不必通過父子組件之間傳值了，如果組件的數據不需要共享，此時，這些不需要共享的私有數據，沒有必要放到vuex中：
使用的限制如下：

• 只有共享的數據，才有權利放到vuex中；
• 組件內部私有的數據，只要放到組件的data中即可；
• props和data和vuex的區別

vuex官方文檔

1.1 安裝引入

1.1.1 普通網頁引入

普通引入的方式，會直接安裝到vue中去

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vuex.js"></script>

1.1.2 NPM方式安裝

安裝依賴的包

npm install vuex 

加載vuex插件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

2 使用方式

2.1 實例構造

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
var store = new Vuex.Store({
    statue:{
        //可以把state想象組件中的data    
        count:0
    },
    mutations:{
        increment(state){
            state.count++ ;
        }
    }
    //如果組件想要調用mutations中的方法需要使用this.$store.commit('方法名');
});

const vm = new Vue({
    el:'#app',
    //通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到
    store:store, //把vuex創建的store掛載到vue實例對象中去，到時候通過this.$store.對應屬性來獲取
});

2.2 主要屬性

對于這些屬性的獲取都是通過this.$store.對應屬性來獲取

2.2.1 五大核心屬性介紹

五大核心：state, getters, mutations, actions, modules

2.2.1.1 state

state：vuex的基本數據，用來存儲變量

 state: {
    userId: '',
    name: '',
    token: '',
  }

在vue中使用this.$store.state.userId來獲取存儲的值

2.2.1.2 getters

getters：從基本數據(state)派生的數據，相當于state的計算屬性,具有返回值的方法

  getters: {
    userIdDouble: function(state){
      return state.userId * 2
  }

在vue中使用 this.$store.getters.userIdDouble

2.2.1.3 mutations

mutation：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個mutation都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。

  mutations: {
    SET_USER: (state, userId) => {
      state.userId = userId
    },
    SET_TOKEN: (state, token) => {
      // console.log(token)
      state.token = token
    }
  },

commit：同步操作，寫法： this.$store.commit(‘mutations方法名’,值)
例如:

this.$store.commit('SET_USER','123456')

回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，第二個參數為提交過來的參數
==多參數傳遞==
由于mutations多個參數的傳遞最多是兩個參數，對于多參數傳遞的話可以把第二個參數作為對象傳遞
調用方法：

this.$store.commit('substract',{c:1,d:2});

定義方法：

mutations: {
    substract (state, obj) {
     console.log(obj.c+"===="obj.d);
    }

2.2.1.4 actions

actions：與mutations的功能大致相同，不同之處在于

1. Actions 提交的是 mutations，而不是直接變更狀態
2. Actions 可以包含任意異步操作

  actions: { // {} 是es6中解構，把對象解構成屬性
    login({ commit }, value) {
      commit('SET_USER', value)
      // commit('SET_TOKEN', value2)
    },
    }

dispatch：異步操作，寫法：this.$store.dispatch(‘mutations方法名’,值)

2.2.1.5 modules

modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutations、actions、getters，使得結構非常清晰，方便管理。
簡單來說就是可以把以上的state、mutations、actions、getters 整合成一個user.js，然后放到store.js里面
例子如下：

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
export default Vuex.store(
    //state:{},
    //mutations:{},
    //actions:{},
    modules:{
        user
    },
);

2.2.2 輔助函數

2.2.2.1 mapState

當一個組件需要獲取多個狀態的時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，可以使用 mapState 輔助函數幫助我們生成計算屬性，讓你少按幾次鍵
首先需要單獨引入mapState的函數：import { mapState } from 'vuex'

// 在單獨構建的版本中輔助函數為 Vuex.mapState
import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

2.2.2.2 mapGetters

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}