Vue狀態管理之vuex

初步認識Vuex
1)Vuex是一個專爲Vue.js應用程序開發的轉態管理模式；集中存儲和管理應用的全部組件狀態。
2）使用場景：
處理多組件依賴於同一個數據
一個組件的行爲——改變數據——影響另外一個組件的視圖（共用依賴的數據）
Vuex將組件公用數據抽離，在一個公共倉庫管理，使得各個組件容易獲取（getter）數據，也容易設置數據（setter）。

Vuex之store
1）Store類就是在存儲數據和管理數據方法的倉庫，實現方式就是將數據和方法以對象形式傳入其實例中。要注意一個應用或項目中只能存在一個Store實例。

sate
用來存放組件之間共享的數據

mutations(只能處理同步函數)
改變狀態（state）的惟一方式是經過提交（commit）一個mutation

getters
對state的數據進行篩選，過濾

actions（能夠包含任意異步操做，ajax、setTimeout、setInterval）

https://vuex.vuejs.org/zh/ins...

1)安裝

npm install vuex --save
或
yarn add vuex

在一個模塊化的打包系統中，您必須顯示地經過Vue.use()來安裝Vuex:

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

當使用全局script標籤引用Vuex時，不須要以上安裝過程

Vuex依賴Promise(不支持promise的瀏覽器)

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm install es6-promise --save # npm
yarn add es6-promise # Yarn
import 'es6-promise/auto'

2)State
Vuex使用單一狀態樹，用一個對象包含了所有的應用層級狀態。這也意味着，每一個應用將僅僅包含一個store實例。（因爲 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅須要在計算屬性(computed)中返回便可。）
在Vue組件中得到Vuex狀態
最簡單的方法是在計算屬性中返回某個狀態

// 建立一個 Counter 組件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

然而，這種模式致使組件依賴全局狀態單例。在模塊化的構建系統中，在每一個須要使用 state 的組件中須要頻繁地導入，而且在測試組件時須要模擬狀態。

Vue經過store選項，提供了一種機制將狀態從根組件「注入」到每一個子組件中（須要調用Vue.use(Vuex)）

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState輔助函數

// 在單獨構建的版本中輔助函數爲 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
    }
  })
}

computed: mapState([
  // 映射 this.count 爲 store.state.count
  'count'
])

對象展開運算符（mapState函數返回的是一個對象）

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

3）Getter
Vuex容許咱們在store中定義「getter」(能夠認爲是store的計算屬性)。就像是計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。(通常用於派生狀態)
Getter接受state作爲其第一個參數：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getter會暴露store.getters對象，能夠以屬性的形式訪問這些值：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

注意，getter 在經過屬性訪問時是做爲 Vue 的響應式系統的一部分緩存其中的。

你也能夠經過讓 getter 返回一個函數，來實現給 getter 傳參。在你對 store 裏的數組進行查詢時很是有用。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

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

import { mapGetters } from 'vuex'

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

若是你想將一個getter屬性另取一個名字，使用對象形式

mapGetters({
  // 把 `this.doneCount` 映射爲 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

4）Mutation
更改Vuex的store中的狀態的惟一方法是提交mutation。Vuex中的mutation很是相似於事件：每一個mutation都有一個字符串的事件類型（type）和一個回調函數（handler）。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受state做爲第一個參數：

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

你不能直接調用一個mutation handler。這個選項更像是事件註冊："當觸發一個類型爲increment的mutation時，調用此函數。"要喚醒一個mutation handler，你須要以相應的type調用store.commit方法：

store.commit('increment')

你能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段而且記錄的mutation會更易讀：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

提交mutation的另外一種方式是直接使用包含type屬性的對象

store.commit({
  type: 'increment',
  amount: 10
})
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

mutation必須是同步函數

5)Action
Action相似於mutation，不一樣在於：
Action提交的是mutation，而不是直接變動狀態。
Action能夠包含任意異步操做

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

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

Action經過store.dispatch方法觸發：

store.dispatch('increment')

咱們能夠在 action 內部執行異步操做：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持一樣的載荷方式和對象方式進行分發：
// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

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

store.dispatch 能夠處理被觸發的 action 的處理函數返回的 Promise，而且 store.dispatch 仍舊返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
store.dispatch('actionA').then(() => {
  // ...
})

6)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 的狀態

對於模塊內部的 mutation 和 getter，接收的第一個參數是模塊的局部狀態對象。

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

一樣，對於模塊內部的 action，局部狀態經過 context.state 暴露出來，根節點狀態則爲 context.rootState：

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

對於模塊內部的 getter，根節點狀態會做爲第三個參數暴露出來：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。

項目結構
├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 咱們組裝模塊並導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產品模塊

交流與學習qq:759020213