Vuex--狀態管理模式

一、Vuex是什麼

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

二、Vuex 的做用

　　集中式管理vue多個組件共享的狀態和從後臺獲取的數據  

 

三、Vuex核心-store庫

   上圖中虛線框的部分就是vuex，是公用的數據存儲區域，能夠理解爲一個store庫，這個庫主要由如下三部分組成：

• State：存放全部的公共數據，當組件使用公共數據時，直接去調用State就能夠了。若 狀態發生變化，相應 的組件也會獲得高效更新。
• Actions：存放組件須要調用的異步操做。若組件想要改變State中的數據，必須先經過Dispatch方法調用Actions（有時能夠忽略調用Actions，直接調用Mutations），執行一些異步或同步操做
• Mutations：組件若要改變數據，先去調用Actions，經過Actions再根據Commit方法去調用Mutations，此時Mutations中存放的是同步的修改State的方法

 

四、Vuex 的工做原理

    首先vue組件會經過this.$store.state或者mapState()直接從State中獲取數據。或者經過this.$store.getters或者mapGetters（）從getters中獲取數據。getters是計算屬性數據 ，能夠讀取State中的數據。

vue組件會經過$store.dispatch()或者mapActions觸發actions。以後，actions經過commit觸發mutations。而mutations會直接更新State中的數據

五、建立store庫

 1 const store = new Vuex.Store({
 2   state: {
 3     count: 0
 4   },
 5   mutations: {
 6     increment (state) {
 7       state.count++
 8     }
 9   }
10 })

以後，咱們能夠經過store.commit('increment')觸發狀態的變動；若是想要變動state數據時，必須以提交 mutation 的方式，這樣才能更明確地追蹤到狀態的變化

使用console.log(store.state.count) // -> 1獲取數據

6、vue組件中如何使用state狀態呢？

  因爲 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅須要在計算屬性中返回便可。觸發變化也僅僅是在組件的 methods 中提交 mutation。

1 // 建立一個 Counter 組件
2 const Counter = {
3   template: `<div>{{ count }}</div>`,
4  computed: {
5     count () {
6       return store.state.count//store.state.count 變化的時候, 都會從新求取計算屬性，而且觸發更新相關聯的 DOM
7     }
8   }
9 }

可是，這種模式會致使組件依賴全局狀態單例。在模塊化的構建系統中，在每一個須要使用 state 的組件中須要頻繁地導入，而且在測試組件時須要模擬狀態。爲了解決這個問題，Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中（需調用 Vue.use(Vuex)）：

1 const app = new Vue({
2   el: '#app',
3   // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
4  store, 5   components: { Counter },
6   template: `<div class="app"><counter></counter> </div>`
7 })

經過在根實例中註冊  選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過  訪問到。
 使用state的實現：storethis.$store此時組件Counter

 1 const Counter = {
 3   template: `<div>{{ count }}</div>`,
 4   computed: {
 5     count () {
 6       return this.$store.state.count  7     }
 8   }
 9 }

 

本文章主要是對Vuex基本知識點的學習總結，詳細內容請參考官網https://vuex.vuejs.org/zh/