Vuex 基本使用

簡單介紹

iPhone X 是 iPhone, Vuex 並非 Vue.咱們查看官方文檔能夠知道：

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

怎麼理解呢？就拿我兩位數的資產的銀行卡來講吧，基本的存錢取錢，就是狀態管理。

怎麼用

演示用法，就拿牛刀殺個雞：以一個簡單的 Todo 做爲例子，來說解 Vuex 的基本使用。

安裝

npm install vuex --save
複製代碼

初始化

首先須要在項目的 src 目錄下，新建一個 Vuex 的目錄 store，結構以下：

初始化 Vuex：

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state
})
複製代碼

引入 Vuex 是理所固然的，除此以外執行 Vue.use(Vuex) 來全局安裝 Vuex. Vuex.Store 即 Vuex 的構造函數，來初始化 Vuex 實例。這裏能夠看到，咱們在 Vuex 構造函數中傳入了一個 state 選項，那這個 state 是什麼呢？

State

State 從字面意思理解，就是狀態，在 Vuex 裏面，什麼表明了狀態呢？數據。State 是 Vuex 這一狀態管理工具的惟一的數據源，全部的數據都儲存在裏面。 State 的寫法以下：

// state.js
const state = {
  todoList: JSON.parse(localStorage.getItem('todoList')) || []
}

export default state
複製代碼

這裏聲明瞭一個 state, 裏面有一個 todoList 的字段，todoList 的數據是去 localStorage 裏面拿的，若是沒有，就是一個空數組。 好了，如今咱們的狀態已經有了，接下來就是要在組件裏面，獲取這個 state, 也就是讓咱們的組件拿到這裏的數據。

Getter

Getter, 顧名思義，就是一個「取」的操做，來拿 state 裏面的數據。Getter 的寫法以下:

// getters.js
export const todoList = state => state.todoList
複製代碼

這裏聲明並輸出了一個 todoList 函數，函數的參數是 state, 返回值 state.todoList. Getter 函數接受 state 做爲它的第一個參數。這裏咱們就取到了上一節 state 裏面的 todoList. 在須要 todoList 數據的組件當中，能夠利用 mapGetters 將數據映射到計算屬性。寫法以下：

import { mapGetters } from 'vuex'

...

export default {
  ...
  computed: {
    ...mapGetters([
      'todoList'
    ])
  }
  ...
}
複製代碼

調用的時候，和普通的計算屬性別無二致:

<ul class="todo-list">
    <li v-for="(item, index) in todoList" :key="index" class="todo-item" >
      ...
    </li>
</ul>
複製代碼

這樣，todoList 就被渲染到了頁面中：

固然，無論是標記一個事項爲完成，仍是添加刪除事項，todoList 都會產生變化，也就是 state 會變化。那咱們怎麼去改變 state 呢？這就須要 mutation 的幫助 。

Mutation

Mutation 是 Vuex 當中改變 state 惟一的方法。Mutation 使用與事件處理函數很是類似，都具備類型和回調函數。 這裏把 mutation 比做事件，首先來規定「事件類型」：

// mutation-types.js
export const SET_TODO_LIST = 'SET_TODO_LIST'
複製代碼

這裏規定了一個 SET_TODO_LIST 的類型。 類型是不可變的，因此咱們將其聲明爲常量。 而後再來寫「事件」的「回調」：

// mutations.js
import * as types from './mutation-types'

const mutations = {
  [types.SET_TODO_LIST] (state, todoList) {
    state.todoList = todoList
  }
}
export default mutations
複製代碼

能夠看到， mutations 是一個對象，一個「事件類型」就對應可一個處理函數。處理函數接受 state 做爲它的第一個參數，第二個參數是額外的，通常稱之爲「荷載 (payload) 」。 這裏咱們的荷載是一個 todoList，這個處理函數將 state 原來的 todoList 改成傳入的荷載。 要使用 mutations，在 Vuex 的構造函數中，就要將 mutations 選項加進去：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import * as getters from './getters'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  state,
  getters,
  mutations,
  plugins: debug ? [createLogger()] : []
})

複製代碼

如今，構造函數中已經傳入了 mutations，接下來，就是在組件中使用 mutations（這裏的第四個選項 plugins 並不影響 mutation 的功能，用途是在控制檯打印 Vuex 操做的信息）.

TodoList 組件中，咱們在「添加事項」這一動做提交 mutation, 改變 state. 組件內的代碼以下：

// todo-list.vue
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    ...
    methods: {
      ...
      addItem () {
        let itemText  = window.prompt('請輸入要添加的事項：')
        if (itemText) {
          let list = this.todoList.slice();
          list.push({
            text: itemText,
            done: false,
            checked: false
          })
          this.setTodoList(list)
        }
      }
      ...
      ...mapMutations({
        setTodoList: 'SET_TODO_LIST'
      })
    }
  }
複製代碼

接下來就去 todo 裏面添加一個條目。如圖，添加了一個 coding 事項：

可在 vue 的 devtool 觀察到以下結果：

能夠看到 mutation 的 payload 以及 type 信息。 再來觀察 Vuex 的 createLogger 插件在控制檯輸出的信息：

能夠看到，這裏進行了一次 SET_TODO_LIST 的 mutation 操做。從 prev state能夠知道 ，操做前， todoList 只有三個條目。進行 SET_TODO_LIST 操做時，傳入的荷載爲四個條目的 todoList。操做後，觀察 next state 可知，操做後的 todoList 已經有四個事項。 在線上的 Demo 中可打開控制檯，添加或者刪除條目，觀察 Vuex 的狀態變化。

總結

這裏用一個 todo 的例子，簡單介紹了 Vuex 基本的 getters 和 mutatiosn 操做，更多的細節，可參考官方文檔 。 Vuex 的應用場景是，當 n 多個組件之間的相互通訊讓人眼花繚亂，那麼藉助 Vuex 保存多個組件共享的狀態，只需操做 state，就能在組件之間同步狀態。