Vue教程20：Vuex入門

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

該節教程代碼可經過npm start運行devServer，在http://localhost:8080/查看效果

Vuex簡介

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

Vuex具備如下特色：

1. 全局 Vuex相似於一個全局變量，它在整個Vue應用中生效。
2. 統一 只要狀態修改，都會自動通知到全部相關組件，不須要使用者主動推送。
3. 單一 在全局中只須要保存一份，便可在全局中使用。

Vuex解決了哪些問題：

1. 數據跨組件共享，數據的傳輸再也不受到父子級限制，能夠在各級組件中任意獲取。
2. 防止數據被意外篡改，Vuex會記錄數據被修改的詳細信息，如修改狀態的組件、時間、代碼位置等，便於定位和追蹤錯誤，同時也方便了調試和測試。

Vuex的狀態管理示意圖詳解

Vuex的使用

代碼示例：/lesson20/src/main.js

先使用vue-cli建立一個項目，以後使用npm install vuex --save安裝Vuex，就能夠在/src/main.js中配置Vuex：

// 1. vuex-引入
import Vuex from 'vuex'

// vue-cli自帶的編譯配置
Vue.config.productionTip = false

// 1. vuex-在Vue中使用Vuex，讓Vuex中的操做掛載到Vue中。
Vue.use(Vuex)

// 3. vuex-聲明store對象
const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 嚴格模式：防止直接修改state，只能用Mutations操做，因爲strict模式是經過對象深度匹配進行，生產模式打開會嚴重影響性能。
  state: {a: 12, b: 5}, // 核心：數據
  mutations: { // 定義Mutations
    
  },
  actions: { // 定義actions
    
  },
  getters: {}, // 相似於computed
  modules: {} // 將store拆分紅多個命名空間，分開使用。
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 將store掛載到Vue實例中。
  components: { App },
  template: '<App/>'
})
複製代碼

讀取state的值

代碼示例：/src/components/Index.vue

在Index.vue中能夠經過$store.state.a讀取到已定義的a的值。

<template>
  <div>
    <!-- 讀取Vuex的state -->
    a: {{$store.state.a}}
    <Cmp1/>
    <Table :fields="fields" :datas="datas" :parent="this"/>
  </div>
</template>
複製代碼

修改state的值

接下來實如今Cmp1.vue組件中，點擊按鈕後修改state中的a的值。

代碼示例：/src/components/Cmp1.vue

<template lang="html">
  <div class="">
    <input type="button" value="+5" @click="fn()">
  </div>
</template>

<script>
export default {
  name: 'cmp1',
  methods: {
    fn(){
      // this.$store.state.a+=5; // 在嚴格模式下，直接修改state能夠成功，但會報錯
      // this.$store.commit('add', 5);  // 直接觸發一個Mutation其實也可行，且不會報錯，但這其實違背了Vuex設計的初衷。
      this.$store.dispatch('add', 5);  // 觸發一個action，實現數據修改。
    }
  }
}
</script>

<style lang="css" scoped>
</style>
複製代碼

在main.js中定義Actions和Mutations。

代碼示例：/lesson20/src/main.js

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 嚴格模式：防止直接修改state，只能用Mutations操做，因爲strict模式是經過對象深度匹配進行，生產模式打開會嚴重影響性能。
  state: {a: 12, b: 5}, // 核心：數據
  mutations: { // 定義Mutations，經過action觸發並更新state，Vue Devtool能夠監聽到數據的修改狀況。
    add (state, n) { // 第一個參數爲舊state，第二個參數爲action中commit傳入的參數。
      state.a += n
    }
  },
  actions: { // 定義actions，actions被觸發後，將數據提交給Mutations進行處理並更新state。
    add ({ commit }, n) { // 第一個參數爲context對象，它不是store自己，能夠經過context.commit提交一個Mutation。第二個參數爲用於更新state的參數。
      commit('add', n)
    }
  },
  getters: {}, // 相似於computed
  modules: {} // 將store拆分紅多個命名空間，分開使用。
})
複製代碼