摘要：使用，引入之后用進行引用。在模板中引入們剛建的文件，并在模板中用輸出的值。在文件中加入兩個改變的方法。和單純的全局對象有以下兩點不同的狀態存儲是響應式的。改變中的狀態的唯一途徑就是顯式地提交。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。
通俗的解釋就是，Vuex 就是為 vue 組件之間進行數據共享而開發的插件。

對于父子組件，可以通過 props 實現數據通信；
不同非父子組件可以引入 vue 對象通過 $emit/$on 實現；
也可以通過不大優雅的 localStorage 存儲;

vuex 是另一種解決方案，如果不同組件有大量數據需要共享通信，vuex 會更適合。

首先搭建一個 vue 項目，安裝 vuex。

npm n install vuex --save

需要注意的是這里一定要加上 –save，因為你這個包我們在生產環境中是要使用的。

yarn add vuex

https://unpkg.com/vuex
下載到本地，引入

并不推薦用 script 方式引入

在項目中新建一個 vuex 文件夾，并在文件夾下新建 store.js 文件，文件中我們的 vue 和vuex。

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

使用 vuex，引入之后用 Vue.use 進行引用。

Vue.use(Vuex);

1.在 store.js 文件里增加一個常量對象。

const state = {
    count:1
}

2.用 export default 輸出對象，讓外部可以引用。

export default new Vuex.Store({
    state
})

3.新建一個 vue 組件，在 components 文件夾下，命名 counter.vue。 在模板中引入們剛建的 store.js 文件，并在模板中用 {{ $store.state.count }} 輸出 count 的值。

4.在 store.js 文件中加入兩個改變 state 的方法。

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
export default new Vuex.Store({
    state,
    mutations
})

5.在 counter.vue 模板中加入兩個按鈕，并調用 mutations 中的方法。

    +
    -

點擊按鈕可以看到count數字的變化。

computed: {
    count () {
      return this.$store.state.count
    }
}

或者

computed: {
    count () {
      return store.state.count
    }
}

在模板里直接訪問 {{ count }} 變能獲取到，
$store 即掛載在vue實例屬性上的 store 對象
通過 this.$store 可以訪問 store 實例后的屬性和方法

import { mapState } from "vuex"
 computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,
  })

我們也可以給 mapState 傳一個字符串數組。

computed: mapState([
  // 映射 this.count 為 store.state.count
  "count"
])

mapState 可以接受函數也可以接受一個數組，最后都統一返回一個 key value 形式的對象，使用數組意味著 key 和 value 名稱是一樣的。
當你需要獲取多個數據時，mapState 可使代碼更簡練。

如果 computed 需要寫多個對象，展開運算符會是一個很棒的選擇。

computed:{
    ...mapState(["count"]),
    ...mapGetters(["count"])
}

狀態可以理解為 state 數據，我們不能直接改變 this.$store.state 里的數據，需要調用 vuex 本身封裝出來的方法，而這也恰好體現了單一數據流，

Vuex 提供了 commit 方法來修改狀態，我們看一下在 demo 中所寫的。

+
-

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

mutations的方法，第一個默認就是 state，第二個參數才是你所傳遞的

const mutations={
    add(state,n){
        state.count+=n;
    }
}

 +

除了字符串數字類型，還可以傳遞對象裝載更多數據

mutations: {
  add (state, payload) {
    state.count += payload.amount
  }
}

store.commit(add, {
  amount: 10
})
// 也可以
store.commit({
  type: "add",
  amount: 10
})

import { mapState,mapMutations } from "vuex";
methods:mapMutations([
    "add","reduce"
])
// 也可以
methods:mapMutations({
  add: "add",
  reduce: "reduce"
})

methods 還可以

methods: {
    ...mapMutations([
        "add","reduce"
    ]),
    other () {
        
    }
}

+

推薦使用數組方式,更為簡單方便

在 store.js 里用 const 聲明我們的 getters 對象

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? "even" : "odd"
}

把寫好的 getters 傳給 Vuex.Store 對象，輸出

export default new Vuex.Store({
    state,
    mutations,
    getters
})

在組件里應用

import {mapState, mapMutations, mapGetters} from "vuex";

computed:{
    ...mapState(["count"]),
    ...mapGetters(["evenOrOdd"]),
},

{{ evenOrOdd }}

便能獲取到 evenOrOdd 的值

Action
類似于 mutation，不同點是，Action 提交的是 mutation，actions 是異步的改變狀態，而 Mutations 是同步改變狀態。
注冊一個簡單的 actions：

const actions ={
    addAction(context){
        context.commit("add",10)
    },
    reduceAction({commit}){
        commit("reduce")
    }
}
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

context是上下文對象，也就是就是 store 對象
通過參數解構可以直接拿到commit
和mutation類似
直接調用 mutation 方法是 commit 調用，Action方法是使用 dispatch
也可以使用輔助函數

methods:{
    ...mapMutations(["add","reduce"]),
    ...mapActions(["addAction","reduceAction"])
},

 +
 -

Actions 支持同樣的載荷方式和對象方式進行分發：

// 以載荷形式分發
store.dispatch("addAction", {
  amount: 10
})

// 以對象形式分發
store.dispatch({
  type: "addAction",
  amount: 10
})

actions 本身是用 promise 封裝實現，dispatch 依然返回 promise
所以你可以

store.dispatch("actionA").then(() => {
  // ...
})

也可以

actions: {
  actionB ({ dispatch, commit }) {
    return dispatch("actionA").then(() => {
      commit("someOtherMutation")
    })
  } 
}

actions 往往用于結合 axios 實現異步請求數據

大型項目多人開發大量的數據共享時，建議使用 Module

之前寫法

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

Module 寫法

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

調用從 store.state.count
應寫成

store.state.a.count

若共享數據很多，可以給數據分組。

state 用于數據存儲

Getter 相當于 state 的計算屬性

Mutation 是改變 state 的方法

Action 是異步改變，提交給 Mutation

分別對應輔助函數 mapState，mapGetter，mapMutation，mapAction

commit 調用 Mutation 方法

dispatch 是調用 Action 方法

最后看 vuex 流程圖，是不是大徹大悟了？

vuex 使用單一狀態樹——用一個對象就包含了全部的應用層級狀態。這也意味著，每個應用將僅僅包含一個 store 實例。單一狀態樹能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

每一個 Vuex 應用的核心就是 store（倉庫）。store 基本上就是一個容器，它包含著應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：

　　1、Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新

　　2、不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得可以方便地跟蹤每一個狀態的變化，從而能夠實現一些工具幫助更好地了解應用
Vuex 背后的基本思想，借鑒了 Flux、Redux 和 The Elm Architecture