摘要：使用，引入之后用進(jìn)行引用。在模板中引入們剛建的文件，并在模板中用輸出的值。在文件中加入兩個(gè)改變的方法。和單純的全局對(duì)象有以下兩點(diǎn)不同的狀態(tài)存儲(chǔ)是響應(yīng)式的。改變中的狀態(tài)的唯一途徑就是顯式地提交。

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
通俗的解釋就是，Vuex 就是為 vue 組件之間進(jìn)行數(shù)據(jù)共享而開發(fā)的插件。

對(duì)于父子組件，可以通過 props 實(shí)現(xiàn)數(shù)據(jù)通信；
不同非父子組件可以引入 vue 對(duì)象通過 $emit/$on 實(shí)現(xiàn)；
也可以通過不大優(yōu)雅的 localStorage 存儲(chǔ);

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

首先搭建一個(gè) vue 項(xiàng)目，安裝 vuex。

npm n install vuex --save

需要注意的是這里一定要加上 –save，因?yàn)槟氵@個(gè)包我們?cè)谏a(chǎn)環(huán)境中是要使用的。

yarn add vuex

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

并不推薦用 script 方式引入

在項(xiàng)目中新建一個(gè) vuex 文件夾，并在文件夾下新建 store.js 文件，文件中我們的 vue 和vuex。

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

使用 vuex，引入之后用 Vue.use 進(jìn)行引用。

Vue.use(Vuex);

1.在 store.js 文件里增加一個(gè)常量對(duì)象。

const state = {
    count:1
}

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

export default new Vuex.Store({
    state
})

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

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

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

5.在 counter.vue 模板中加入兩個(gè)按鈕，并調(diào)用 mutations 中的方法。

    +
    -

點(diǎn)擊按鈕可以看到count數(shù)字的變化。

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

或者

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

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

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

我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。

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

mapState 可以接受函數(shù)也可以接受一個(gè)數(shù)組，最后都統(tǒng)一返回一個(gè) key value 形式的對(duì)象，使用數(shù)組意味著 key 和 value 名稱是一樣的。
當(dāng)你需要獲取多個(gè)數(shù)據(jù)時(shí)，mapState 可使代碼更簡(jiǎn)練。

如果 computed 需要寫多個(gè)對(duì)象，展開運(yùn)算符會(huì)是一個(gè)很棒的選擇。

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

狀態(tài)可以理解為 state 數(shù)據(jù)，我們不能直接改變 this.$store.state 里的數(shù)據(jù)，需要調(diào)用 vuex 本身封裝出來(lái)的方法，而這也恰好體現(xiàn)了單一數(shù)據(jù)流，

Vuex 提供了 commit 方法來(lái)修改狀態(tài)，我們看一下在 demo 中所寫的。

+
-

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

mutations的方法，第一個(gè)默認(rèn)就是 state，第二個(gè)參數(shù)才是你所傳遞的

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

 +

除了字符串?dāng)?shù)字類型，還可以傳遞對(duì)象裝載更多數(shù)據(jù)

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

+

推薦使用數(shù)組方式,更為簡(jiǎn)單方便

在 store.js 里用 const 聲明我們的 getters 對(duì)象

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

把寫好的 getters 傳給 Vuex.Store 對(duì)象，輸出

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

在組件里應(yīng)用

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

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

{{ evenOrOdd }}

便能獲取到 evenOrOdd 的值

Action
類似于 mutation，不同點(diǎn)是，Action 提交的是 mutation，actions 是異步的改變狀態(tài)，而 Mutations 是同步改變狀態(tài)。
注冊(cè)一個(gè)簡(jiǎn)單的 actions：

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

context是上下文對(duì)象，也就是就是 store 對(duì)象
通過參數(shù)解構(gòu)可以直接拿到commit
和mutation類似
直接調(diào)用 mutation 方法是 commit 調(diào)用，Action方法是使用 dispatch
也可以使用輔助函數(shù)

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

 +
 -

Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)：

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

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

actions 本身是用 promise 封裝實(shí)現(xiàn)，dispatch 依然返回 promise
所以你可以

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

也可以

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

actions 往往用于結(jié)合 axios 實(shí)現(xiàn)異步請(qǐng)求數(shù)據(jù)

大型項(xiàng)目多人開發(fā)大量的數(shù)據(jù)共享時(shí)，建議使用 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
  }
})

調(diào)用從 store.state.count
應(yīng)寫成

store.state.a.count

若共享數(shù)據(jù)很多，可以給數(shù)據(jù)分組。

state 用于數(shù)據(jù)存儲(chǔ)

Getter 相當(dāng)于 state 的計(jì)算屬性

Mutation 是改變 state 的方法

Action 是異步改變，提交給 Mutation

分別對(duì)應(yīng)輔助函數(shù) mapState，mapGetter，mapMutation，mapAction

commit 調(diào)用 Mutation 方法

dispatch 是調(diào)用 Action 方法

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

vuex 使用單一狀態(tài)樹——用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）。store 基本上就是一個(gè)容器，它包含著應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

　　1、Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新

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