Vuex搭建

Vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

這個狀態自管理應用包含如下幾個部分：

state: 驅動應用的數據源

view: 以聲明方式將state映射到視圖

actions: 響應在view上的用戶輸入致使的狀態變化

1.安裝

npm install vuex --save
or
yarn add vuex

2.使用

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

1. Vuex的狀態存儲是響應式的。當Vue 組件從store中讀取狀態的時候，若 store中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
2. 你不能直接改變store中的狀態。改變 store中的狀態的惟一途徑就是顯式地提交(commit) mutations 。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

3.註冊

在src下建立Vuex文件夾, 在文件夾中建立store.js 導入並註冊

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

在main.js 中要進行引入

import store from './vuex/store'

new Vue({
  el: '#app',
  router,
  // 把 store 對象提供給 "store" 選項，這能夠把 store 的實例注入全部的子組件
  store,
  template: '<App/>',
  components: { App }
})

4.項目中調用

在store文件中建立並導出

export default new Vuex.Store ({
  // 保存初始狀態的地方
  state: {
    count: 0 
  },
  // 定義方法改變狀態的地方
  mutations : {
  // state 狀態 num 傳進來的參數
    increment:(state, num) =>{
      console.log(state)
      state.count = num
    }
  }
})

5.調用狀態

this.$store.state.count

// 能夠在計算屬性computed調用
 computed: {
      src() {
        return this.$store.state.count
      }
    },

6.修改狀態

this.$store.commit('increment', 10)

// 以載荷形式分發
this.$store.commit({
  type: 'increment',
  amount: 10
})

// 以對象形式分發
this.$store.commit('increment', {
  amount: 10
})

7. action

Action 相似於mutation，不一樣在於：

Action提交的是mutation，而不是直接變動狀態。

Action 能夠包含任意異步操做。

// 異步操做
actions: {
    increments (context, num) {
      context.commit('increment', num)
    }
  }

Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation ，或者經過 context.state 和 context.getters 來獲取 state 和 getters 。

8. 觸發action

this.$store.dispatch('increments', 50)

9. Module

因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。



爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：

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 的狀態
store.state.b // -> moduleB 的狀態