Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

上次學習了vue-router的使用，讓我可以在各個頁面間切換，將頁面搭建了起來。此次則要學習vue的狀態管理模式——vuex。它相似於redux來應用的全局狀態。

注：本文只是我的對vuex學習的一些理解，要深入掌握還須要認真查閱官方文檔。

1、基本介紹

Vuex 是一個專爲 Vue.js 的SPA單頁組件化應用程序開發的狀態管理模式插件。
因爲Vue SPA應用的模塊化，每一個組件都有它各自的數據(state)、界面(view)、和方法(actions)。這些數據、界面和方法分佈在各個組件中，當項目內容變得愈來愈多時，每一個組件中的狀態會變得很難管理。這是vuex就派上用場啦~下面咱們看一個簡單的vuex例子。

1. 單個組件中的狀態

假如只是在單個組件中要改變界面view很簡單，只須要改變state數據源便可。以下代碼：

<template>
    <div>
      view: {{ count }}
      <button @click="increment">increment</button>
    </div>
</template>

<script>
export default {
  // state
  data () {
    return {
      count: 0
    }
  },
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

因此，單個組件中的原理圖是這樣的：

2. 多個組件中的狀態

然而，咱們做爲組件化的SPA應用，一定會牽扯到多個組件間的通訊。
好比有兩個相同的組件A和B，它們共享一個數據count，而且都有一個方法能夠操做這個count，咱們使用vuex來寫。
A組件和B組件的代碼（代碼相同）

<template>
  <div>
    {{ $store.state.count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment () {
        this.$store.commit('increment')
      }
    }
  }
</script>

能夠看到，這裏的兩個increment按鈕點擊都會同時改變兩個count的數據，由於數據源count和方法increment都是全局的。
正以下面官方原理圖所畫的，咱們把全局數據源state、改變數據源的方法mutations、異步操做方法actions都放提取出來放到store中，實現全局數據狀態單獨管理的功能。

2、安裝&配置

1. 安裝vuex

使用npm安裝並保存到package.json中：

npm install vuex --save

package.json

"devDependencies": {
    ...
    "vuex": "^2.1.1",
    ...
  },

2. 配置

配置方式和路由的配置方式差很少

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//建立Store實例
const store = new Vuex.Store({
  // 存儲狀態值
  state: {
    ...
  },
  // 狀態值的改變方法,操做狀態值
  // 提交mutations是更改Vuex狀態的惟一方法
  mutations: {
    ...
  },
  // 在store中定義getters（能夠認爲是store的計算屬性）。Getters接收state做爲其第一個函數
  getters: {
    ...
  },
  actions: { 
    ...
  }
})
// 要改變狀態值只能經過提交mutations來完成

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  // 將store實例注入到根組件下的全部子組件中
  store
  // 子組件經過this.$store來方位store
})

3、核心概念

1. state

state就是全局的狀態（數據源），咱們能夠用如下方式在Vue 組件中得到Vuex的state狀態
template

<div>
    {{ $store.state.count }}
  </div>

script

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

2. getters

getters其實能夠認爲是 store 的計算屬性，用法和計算屬性差很少。
定義getter：

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

使用getter

console.log(this.$store.getters.done)

3. mutations

mutations是操做state的惟一方法，即只有mutations方法可以改變state狀態值。

3.1 基本操做

mutations對state的操做

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

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

this.$store.commit('increment')

這樣的好處是咱們能夠跟蹤到每一次state的變化，以便及時分析和解決問題。

3.2 提交載荷（Payload）

mutations方法中是能夠傳參的，具體用法以下：

mutations: {
    // 提交載荷 Payload
    add(state, n) {
      state.count += n
    }
  },

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

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

3.3 注意

mutations方法必須是同步方法！

4. actions

4.1 基本操做

以前說mutations方法必須只能是同步方法，爲了處理異步方法，actions出現了。關於action和mutations的區別有如下幾點：

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

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

• Action 仍是得經過 mutation 方法來修改state
  一樣是以前的increment方法,咱們分別用同步和異步的action來驗證上面所說的與mutations的不一樣之處：

actions: {
    increment (context) {
      context.commit('increment')
    },
    incrementAsync (context) {
      // 延時1秒  
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },

不一樣於mutations使用commit方法，actions使用dispatch方法。

this.$store.dispatch('incrementAsync')

4.2 context

context是與 store 實例具備相同方法和屬性的對象。能夠經過context.state和context.getters來獲取 state 和 getters。

4.3 以載荷形式分發

incrementAsyncWithValue (context, value) {
      setTimeout(() => {
        context.commit('add', value)
      }, 1000)
    }

this.$store.dispatch('incrementAsyncWithValue', 5)

5. module

使用單一狀態樹，致使應用的全部狀態集中到一個很大的對象。可是，當應用變得很大時，store 對象會變得臃腫不堪。
爲了解決以上問題，Vuex 容許咱們將 store 分割到模塊（module）。每一個模塊擁有本身的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行相似的分割：

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

module其實仍是對於大型的SPA應用來講的，暫時對module的應用和理解並無太多，以後會補上這一起的內容。
想要了解更多module知識，請查閱官方module文檔

Vue.js學習系列

做者最近正在惡補Vue的各類知識，但願可以系統的掌握Vue的開發知識。有興趣的同窗能夠查看以前發佈的文章：
Vue.js學習系列一 —— vue-router2學習實踐筆記（附DEMO）
Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）
Vue.js學習系列三——axios和網絡傳輸相關知識的學習實踐
Vue.js學習系列四——Webpack打包工具的使用
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint

Vue.js學習系列項目地址（項目暫時有點亂，以後會進行整理優化。）

本文源碼已收入到GitHub中，以供參考，固然能留下一個star更好啦^-^。
https://github.com/violetjack...

關於做者

VioletJack，移動、前端工程師，兩年移動端工做經驗、一年前端工做經驗。現專一於移動前端的學習和開發。擅長Android開發和Vue前端開發。會按期產出關於Android、Vue、移動前端相關的博文。歡迎你們關注我，我會用心維護和經營好博客，多產出高質量文章。同時也但願我所寫的東西能夠幫到有須要的朋友。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571...
CSDN: http://blog.csdn.net/violetja...
簡書： http://www.jianshu.com/users/...
Github： https://github.com/violetjack