摘要：的數(shù)據(jù)會在上顯示出來，用戶會根據(jù)上的內(nèi)容進(jìn)行操作，從而觸發(fā)，接著再去影響是單向數(shù)據(jù)流的方式驅(qū)動的。當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞。中的非常類似于事件每個都有一個字符串的事件類型和一個回調(diào)函數(shù)。

組件是Vue最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，意味著不同組件之間的數(shù)據(jù)是無法相互使用。組件間如何傳遞數(shù)據(jù)就顯得至關(guān)重要，這篇文章主要是介紹Vuex。盡量以通俗易懂的實(shí)例講述這其中的差別，希望對小伙伴有些許幫助。

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

一個簡單的 Vue 計(jì)數(shù)應(yīng)用開始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    
{{ count }}
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

這個狀態(tài)自管理應(yīng)用包含以下幾個部分：

state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將 state 映射到視圖；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

state的數(shù)據(jù)會在 view上顯示出來，用戶會根據(jù) view 上的內(nèi)容進(jìn)行操作，從而觸發(fā) actions，接著再去影響 state（vue 是單向數(shù)據(jù)流的方式驅(qū)動的）。

當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞。下面的圖，是把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。

1. state
state：頁面狀態(tài)管理容器對象。集中存儲Vue components中data對象的零散數(shù)據(jù)，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進(jìn)行讀取。

  

    {{ $store.state.count }}
  
   console.log(this.$store.state.count)

2. getters
getters：Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。（getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工。getters就像計(jì)算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。）

定義getter：

  getters: {
    done(state) {    
      return state.count + 1;
    },
  }

3. mutations
mutations：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

組件通過commit提交mutations的方式來請求改變state

this.$store.commit("increment")

提交載荷（Payload）
mutations方法中是可以傳參的，具體用法如下：

  mutations: {
    // 提交載荷 Payload
    add(state, n) {
      state.count += n
    }
  },
this.$store.commit("add", 10)

4.Action
Action：類似于 mutation，不同在于Action 提交的是 mutation，而不是直接變更狀態(tài)；Action 可以包含任意異步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit("increment")
    }
  }
})

不同于mutations使用commit方法，actions使用dispatch方法。

this.$store.dispatch("incrementAsync")

context
context是與 store 實(shí)例具有相同方法和屬性的對象?？梢酝ㄟ^context.state和context.getters來獲取 state 和 getters。
以載荷形式分發(fā)

incrementAsyncWithValue (context, value) {
  setTimeout(() => {
    context.commit("add", value)
  }, 1000)
}
this.$store.dispatch("incrementAsyncWithValue", 5)

5.Module
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：

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

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

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

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

模塊的局部狀態(tài)
對于模塊內(nèi)部的 mutation 和 getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象。

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 這里的 `state` 對象是模塊的局部狀態(tài)
      state.count++
    }
  },    
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

在src目錄下創(chuàng)建一個store文件夾。

store/store.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    show: ""
  },
  getters: {
    counts: (state) => {
      return state.count
    }
  },
  mutations: {
    increment: (state) => {
      state.count++
    },
    decrement: (state) => {
      state.count--
    },
    changVal: (state, v) => {
      state.show = v
    }
  }
})
export default store

state就是我們的需要的狀態(tài)，狀態(tài)的改變只能通過提交mutations,例如：

increase() {
      this.$store.commit("increment")
    }

帶有載荷的提交方式：

changObj () {
      this.$store.commit("changVal", this.obj)
    }

載荷也可以是一個對象，這樣可以提交多個參數(shù)。

changObj () {
      this.$store.commit("changVal", {
          key:""
      })
    }

在main.js中引入store.js

import store from "./store/store"
export default new Vue({
  el: "#app",
  router,
  store,
  components: {
    App
  },
  template: ""
})

在組件中使用
在組建可以通過$store.state.count獲得狀態(tài)
更改狀態(tài)只能以提交mutation的方式。

  

    {{$store.state.count}}
  
  +
  -
  

  
{{$store.state.show}}
  
  

很多時候 , $store.state.dialog.show 、$store.dispatch("switch_dialog") 這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取一個狀態(tài)只需要 this.show , 執(zhí)行一個方法只需要 this.switch_dialog 就行了 , 使用 vuex 使寫法變復(fù)雜了 ?使用 mapState、mapGetters、mapActions 就不會這么復(fù)雜了。

以 mapState 為例 :

相當(dāng)于 :

mapGetters、mapActions 和 mapState 類似 , mapGetters 一般也寫在 computed 中 , mapActions 一般寫在 methods 中。
Vuex官方文檔

Vue面試中，經(jīng)常會被問到的面試題