一篇文章帶你吃透Vuex3的狀態管理

2022-07-24 14:00:34

一. Vuex是什麼

瞭解過Vuex的都知道，它是Vue官方的狀態管理方案；可以對父子，祖孫以及兄弟元件之間進行通訊；

除了使用Vuex，我們都知道還有一個方案能滿足任何元件的之間的通訊，那就是vue全域性事件匯流排（$ bus）；

在資料接收元件內利用$ on繫結一個事件(eventName)，第二個引數繫結一個回撥函數來接受資料。

//接收資料的元件
this.$bus.$on('eventName',(value)=>{
   console.log(value) //{a:1,b:2}
})

在資料傳送元件內利用$ emit 提交給繫結的事件(eventName),後面的引數為要傳遞的資料；

//傳送資料的元件
var obj = {a:1,b:2}
this.$emit('eventName',obj)

那既然Vue全域性事件匯流排（$ bus）能夠滿足任何元件的之間的通訊，為什麼vue官方還要再創造出Vuex呢？

Vue全域性事件匯流排

我們來看下面這個場景（利用事件匯流排進行資料共用）圖片來源於尚矽谷

上圖可以看到，A元件中data中有一個X屬性，B,C,D元件也都需要，共用屬性可以利用$ on 去獲取到X屬性；這樣看起來，感覺不是很簡單嗎，沒有什麼啊，別急，這只是讀取屬性，那如果B,C,D需要修改呢？

其實只需要在B,C,D元件內去利用$ emit事件把修改的值傳送給A元件，A元件再通過$ on去接受然後對X屬性進行修改，光看文字是不是感覺已經很繞啦，也就是下圖所示：圖片來源於尚矽谷

紅色箭頭是B,C,D元件讀取到共用屬性X，綠色箭頭是B,C,D元件修改X屬性；

目前場景只是展示四個元件都需要一個共用屬性X，通過讀寫，看上去都已經很亂啦，那如果大專案中有十幾個，幾十個元件都需要一個共用屬性X呢，豈不是更亂；

Vuex狀態管理

那如果要用Vuex實現X屬性的共用呢？看下圖：圖片來源於尚矽谷

Vuex是獨立於任何元件的一個存在，把A,B,C,D元件需要共用的屬性放到Vuex中去管理，不需要共用的屬性還是寫在原元件內；此時A,B,C,D元件和Vuex是雙向箭頭，就是元件既可以通過其內建的api去讀，也可以去修改，某一個元件修改共用的屬性，其他元件獲取的都是最新修改的資料；

何時使用Vuex

Vue事件匯流排其實也很方便，但是適合使用小專案中；對於大專案Vuex作為共用狀態集中式管理，是最好的選擇，方便使用以及維護；

那疑問來了，我也不清楚專案的大小怎麼辦，什麼時候適合使用Vuex呢？

專案中多個元件都需要使用或修改共同一個狀態（多個元件共用同一個狀態）

二. 純vue元件案例

本來打算直接介紹引入Vuex的程式碼步驟和方法，但是為了更好的理解好對比，我先把我寫的兩個元件案例demo和程式碼給大家看一下,稍後再給大家看引入Vuex後的程式碼，雖然功能都一模一樣，主要是對比Vuex使用前後的元件內部程式碼不同；

計算總數案例

導航二的計算總數案例元件：

程式碼如下：

<template>
    <div>
        <h3 style="marginBotton:10px;">此時導航三元件內總人數為：???</h3>
        <h3 :style="{marginBottom:'10px'}">當前計算的和為:{{count}}</h3> 
        <el-select v-model.number="value" size="mini"  :style="{width:'60px'}" placeholder="0">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button size="mini" @click="jia">+</el-button>
        <el-button size="mini" @click="jian">-</el-button>
        <el-button size="mini" @click="oddJia">和為奇數 +</el-button>
        <el-button size="mini" @click="asyncJia">等1秒後 +</el-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            count:0,
            options: [
                {value: 1,label: '1'},
                ...
            ],
            value: null
            }
    },
    methods:{
         jia(){
           this.count += this.value
         },
         jian(){
           this.count -= this.value
           if(this.count <= 0){
               this.count = 0
           }
         },
         oddJia(){
             if(this.count%2 !== 0){
                this.jia()
             }
         },
         asyncJia(){
             setTimeout(() => {
                 this.jia()
             },1000)
         }
    }
}
</script>

新增人員案例

導航三新增人員案例元件：

程式碼如下：

<template>
    <div>
         <el-select v-model="value" placeholder="請選擇新增人員">
            <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>
        <el-button  @click="addPerson">新增</el-button>
        <el-button  @click="rest">還原</el-button>
        <el-table
            :data="filterTable"
            :border='true'
            style="width: 100%;marginTop:10px">
            <el-table-column
                align="center"
                prop="name"
                label="姓名">
            </el-table-column>
            ...
        </el-table>
        <h3 style="marginTop:10px;">此時表格總人數為：{{filterTable.length}}</h3>
        <h3 style="marginTop:10px;">此時導航二元件的計算總和為：？？？</h3>
    </div>
</template>
<script>
export default {
    data() {
        return {
           value:'',
           options: [
                {name: '王朝', sex:'男',age:21,hobby:'武術'}, 
                ...
            ],
            tableData: [
                {name: '張三', sex:'男',age:18,hobby:'唱歌'}, 
                {name: '李四', sex:'女',age:20,hobby:'跳舞'},   
            ],
           filterTable:[]
        }
    },
    mounted(){
        this.filterTable.push(...this.tableData)
    },
    methods:{
        addPerson(){
            var isHave = true
            this.filterTable.forEach( e => {
                if(e.name == this.value)  isHave = false
            })
            if(!isHave){
                this.$message({
                    message: '人員已新增！',
                    type: 'warning',
                    duration:1000
                })
                return
            }

           var person =  this.options.filter( item => {
                return item.name == this.value
            })
            this.filterTable.push(person[0])
        },
        rest(){
           this.filterTable = this.tableData
        }
    }
}
</script>

此時兩個元件是完全獨立的，沒有實現資料共用，所以在用到對方元件內資料的地方以 ”???“ 標記；

接下來，我們就開始一步一步使用Vuex去實現兩個元件的資料共用；

三. Vuex工作原理和流程

下面是官方給的Vuex的工作原理圖，如下：

如果想要很熟悉的使用Vuex，那我們就應該先了解其工作原理，明白了它內部的運轉機制，那麼我們就可以告別死記，就可以很熟悉流暢的編寫程式碼；

從上圖工作原理圖來看Vuex中有三個最重要的核心物件，Actions，Mutations，State，那他們三個是什麼關係，怎麼協助運轉呢，下面我們來看一下Vuex的工作流程；

第一種工作流程

為了方便了解，我給Vuex工作原理圖稍微做了一些標註，圖如下：

這個紅色箭頭就是元件使用Vuex的工作流程，配合上圖，認真理解下面文字，看一下元件是怎麼修改共用資料的：

vue元件內呼叫dispacth()函數，該函數內又兩個引數，第一個引數是一個方法名‘key1’,第二個引數是傳入的值
由於的元件呼叫了dispatch，就會在Actions物件中去找dispatch函數傳入的一個引數‘key1’;
找到key1後，就會呼叫對應的函數；key1函數內部又呼叫了commit()函數。commit()函數也有兩個引數，第一個引數是一個方法名‘KEY1’,第二個引數是傳入的值;
由於呼叫了commit,就會在Mutations物件中去找commit函數傳入的第一個引數‘KEY1’;
在Mutations物件找到‘KEY1’對應的函數後，Vuex內部呼叫Mutate對狀態就行修改，修改狀態後對修改狀態的元件進行render

第二種工作流程

現在應該瞭解其工作的大致流程了吧，別急，還沒有完，我們繼續看下圖：

這個應該是最完善的工作流程圖，除了剛才我們介紹的最外圈的工作流程外，其實元件也可以直接去呼叫commit()去修改狀態；那該怎麼區分和使用呢？

Vuex內部有規定，Actions中主要寫一些複雜的業務邏輯和非同步處理，Mutations中主要修改狀態；
如果在元件內就可以拿到需要傳遞的value值，內部不在需要對value進行過多的業務了邏輯處理，可以直接commit()去Mutations中呼叫修改狀態函數
如果需要傳遞的value值要通過介面獲取，然後還要進行復雜的業務邏輯，最好放到Actions的函數去處理；
這樣做的好處是Devtools開發工具可以準確的監控Vuex狀態的變化；

生活化的Vuex工作原理

以上就是Vuex的全部工作原理以及流程；但是為了讓大家更好的去記住和理解，我又模擬了下面這個場景：

Vuex就相當於一個飯店，vue元件就是顧客，Actions就是服務員，Mutations就是廚師，state就是做出來的菜和飯；我們把修改共用狀態的任務改成點菜，我們可以走一下點餐流程：

通過服務員點餐的流程：

首先，顧客因為不熟悉飯店菜品點菜的時候需要詢問，所以要找‘服務員1’點菜，或者是通過掃描桌上外賣平臺點餐
其次，‘服務員1’整理好選單後就交給了後廚‘廚師1’去做。後廚安裝的有監控，以後想要知道哪個廚師做的哪個顧客的菜都能查詢到；
最後，廚師1做好菜，顧客就可以直接拿到；

顧客自己點餐的流程：

首先，顧客很熟悉這家飯店，菜系瞭解，廚師也都認識這樣就很簡單，直接找到‘廚師1’要了幾個菜；
最後，廚師1做好菜，顧客就可以直接拿到；

現在應該很熟悉Vuex的工作流程了吧，很簡單，學會點菜就行，哈哈，那接下來我們就要開始使用Vuex啦；

四. 在專案中引入Vuex

安裝Vuex

首先，你的電腦要安裝node環境，使用npm安裝：

npm install vuex --save

建立store

然後在專案src資料夾下建立一個store資料夾，在其裡面建立index.js：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {},
  getters:{},
  mutations: {},
  actions:{},
  modules:{}
})
export default store

在Vue中掛載store

最後在main.js檔案內引入建立的store:

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store
})

五. Vuex的核心屬性用法

知道一個元件怎麼使用，另一個就不在話下，這裡我以計算總陣列件為例；

在建立store範例的時候，大家可以看到Vuex內部有五個核心屬性，下面我們就從這五個核心屬性入手，一步一步實現計算總數案例的所有原有功能；

刪除掉計算總陣列件所有邏輯程式碼，此時demo，如下圖：

程式碼如下：

<template>
    <div>
        <h3 style="marginBotton:10px;">此時導航三元件內總人數為：???</h3>
        <h3 :style="{marginBottom:'10px'}">當前計算的和為：???</h3> 
        <el-select v-model.number="value" size="mini"  :style="{width:'60px'}" placeholder="0">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button size="mini" @click="jia">+</el-button>
        <el-button size="mini" @click="jian">-</el-button>
        <el-button size="mini" @click="oddJia">和為奇數 +</el-button>
        <el-button size="mini" @click="asyncJia">等1秒後 +</el-button>
    </div>
</template>
<script>
export default {
    data(){
        return{  
            options: [
                {value: 1,label: '1'},
                ...
            ],
            value: null
            }
    },
    methods:{
         jia(){},
         jian(){},
         oddJia(){},
         asyncJia(){ }
    }
}
</script>

單一資料來源（state）

首先是state設定，它的值是一個物件，用來儲存共用狀態；Vuex使用單一樹原則，將所有的狀態都放到這個物件上，便於定位和維護；

我們把計算總陣列件的count放到Vuex中的state中，如下：

...
const store =  new Vuex.Store({
  state: {
    count:0
  }, 
})
...

元件中獲取，可以這樣：

...
 computed:{
       count(){
           return this.$store.state.count
       }
  },
...

如果元件內需要引入的共用狀態屬性較多，都使用this.$store.state.x的話，會比較麻煩，所Vuex給我們提供了mapState()輔助函數來獲取，如下：

import {mapState} from 'vuex'
 ...
 computed:{
  //引數為物件寫法
   ...mapState({
     //key值隨意自定義，模板中插值也要寫入自定義的key值
       count:'count' 
   })
   //引數為陣列寫法
   // 此時元件定義的屬性名要和state中定義的屬性名一致
  ...mapState(['count'])
  },
  ...

以上兩種獲取方式，元件都可以獲取到共用的count屬性，並顯示到頁面上，如下圖：

狀態更新方式（mutations）

Vuex中的狀態和元件中的狀態不同，不能直接 state.count = ‘xx’ 這種方式去修改；Vuex修改狀態的唯一方式就是提交mutation；

mutation是一個函數，第一個引數為state，它的作用就是更改state的狀態；

下面我們就來定義一個mutation，在函數內去更新count這個狀態：

const store =  new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    //更改count方法,type為增加
    JIA(state,count){
      state.count += count
    }
  }
})

元件中提交commit函數去觸發mutattions中定義的JIA函數:

...
 methods:{
    jia(){
         this.$store.commit('JIA',this.value)
     }
 }
 ...

或者是利用最常用的mapMutations輔助函數，如下：

...
 //把獲取的單選框的value值，通過引數傳給mutation定義的jia函數，
 <el-button size="mini" @click="JIA(value)">+</el-button>
 ...
 import {mapMutations} from 'vuex'
 ...
  methods:{
     //物件引數中的key值為自定義的點選事件名
      ...mapMutations({JIA:'JIA'}),
      //引數為陣列，此時點選事件名要和mutation中定義的增加事件名一致
       ...mapMutations(['JIA',]),
  }

以上兩種方法都能實現增加功能，如下圖：

store中的計算屬性（getters）

有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數，這裡我們就簡單的把計算總數和隨之增加10倍：

Getter 接受 state 作為其第一個引數，如下：

const store =  new Vuex.Store({
  state: {
    count:0
  },
  getters:{
    multipleCount(state){
      return state.count * 10
    }
  }
})

元件中可以這樣去獲取，如下：

<h3>當前計算的和的10倍為：{{multipleCount }}</h3> 
...
 computed:{
    multipleCount(){
        return  this.$store.getters.multipleCount
    },
 },

或者利用輔助函數mapGetters獲取，和mapState引入一樣，如下：

import {mapGetters} from 'vuex'
...
computed:{
    //物件寫法
    ...mapGetters({
        multipleCount: 'multipleCount'
    }),
    
    //陣列寫法
    //此時自定義的函數名要和getter中定義的函數名一致
   ...mapGetters(['multipleCount']),
 },

以上兩種方式都可以獲取到getter函數，如下圖：

非同步更新狀態（actions）

Action 類似於 mutation，不同在於：

Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意非同步操作。

最大的區別就是action中可以寫一些業務邏輯和非同步操作；而mutation就是簡單的變更狀態；

怎麼說呢，其實action很像一個連線元件和mutation的中介，對於同步和非同步操作在action中都能完成，它只是幫我們在actions函數中commit提交了mutations中的函數；

同步增加總數

下面我們來再一次用action來實現點選JIA函數增加總數（同步操作），如下：

const store = new Vuex.Store({<!--{C}%3C!%2D%2D%20%2D%2D%3E--> state: {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> count:0 }, mutations: {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> JIA(state,count){<!--{C}%3C!%2D%2D%20%2D%2D%3E--> state.count += count } }, actions:{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> //第一個引數為context(上下文)，第二個引數為傳的值 jia(context,value){<!--{C}%3C!%2D%2D%20%2D%2D%3E--> console.log(context) //列印結果如下圖 context.commit('JIA',value) } },})

這就是 console.log(context) 的結果，是一個物件，裡面包含了commit,dispatch,getters等方法，像一個小型的srore,但是跟store不一樣，我們這裡就叫上下文；

既然context是個物件，如果我們只需要commit的話，也可以使用資料解構的方式寫，入下圖：

 actions:{
   //第一個引數為context(上下文)，第二個引數為傳的值
    jia({commit},value){
        commit('JIA',value)
    }
  },

元件可以分發action，通過 store.dispatch 方法觸發：

methods:{   
    jia(){
          this.$store.dispatch('jia', this.value)
      },
}

或者通過mapActions輔助函數來觸發：

import { mapActions} from 'vuex'
...
methods:{   
   //物件引數中的key值為自定義的點選事件名
   ...mapActions({jia:'jia'}), 
   //陣列引數
   //此時點選事件名要和action中定義的增加事件名一致
   ...mapActions(['jia']), 
}

我們利用actions和mutations都可以實現JIA函數的功能使總數增加；那問題來了，我們可以呼叫mutations裡面定義的JIA函數，為什麼還要多此一舉的在actions中去呼叫mutation，然後再去分發actions呢；

當然這裡我們只是演示給大家作為參考，一般同步操作我們也不會多此一舉的放入actions裡面，專案中直接更新狀態我們就直接在元件commit提交mutation函數就可以；

非同步增加總數

由於專案沒有寫後臺服務，是mock的資料，這裡我們非同步就用定時器來寫，如下圖：

 actions:{
    asyncJia({commit},value){
        setTimeout(() => {
          context.commit('JIA',value)
        },1000) 
    }
 },

元件中分發action方法如下：

 methods:{
       asyncJia(){
           this.$store.dispatch('asyncJia',this.value)
        }
  }

一樣，也可以利用mapActions函數，如下：

import { mapActions} from 'vuex'
...
methods:{   
   // //物件引數中的key值為自定義的點選事件名
   ...mapActions({asyncJia:'asyncJia'}), 
    //陣列引數，此時點選事件名要和action中定義的增加事件名一致
   ...mapActions(['asyncJia']), 
}

不管是同步和非同步操作，以上方法都能實現增加總數的功能；

為什麼actions中處理非同步

那問題來了，為什麼actions中可以處理非同步操作，而不能在mutations中進行呢？

以上屬於簡單的一些業務邏輯，action中的定時器或者奇數判斷其實在mutation中就可以完成，這樣感覺action就像是多餘的一樣；

官方明確表示：

mutations裡同步的意義在於，每一個mutation執行完畢之後，可得到對應的狀態，方便Vuex的devtools工具可以跟蹤狀態的變化
如果在mutations中寫入非同步，devtools工具就沒法知道狀態是什麼時候更新的，所以才有了actions
actions用來專門處理非同步，裡面觸發mutations，就可以很清楚的看到mutation是何時被記錄下來的，並且可以立即檢視對應的狀態，這樣非同步更新也可以看到更新狀態的流程；

舉個例子，還有就是遇到一些複雜的業務邏輯，第二個非同步操作可能會依賴第一個操作的結果；

程式碼如下：

actions:{
    asyncJia({commit},value){
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          context.commit('JIA',value)
          resolve()
        },1000)
      })  
    }
 },

元件內呼叫此非同步增加函數後，返回結果後再等1秒呼叫增加函數，程式碼如下：

...
<el-button size="mini" @click="doubleAsync(value)">非同步 + 後再等1秒後 +</el-button>
...
import {mapMutations, mapActions} from 'vuex'
...
methods:{
     ...mapMutations(['JIA','JIAN']),
      ...mapActions(['oddJia','asyncJia']),
      doubleAsync(){
          this.asyncJia(this.value).then(() => {
            setTimeout(() => {
               this.JIA(this.value)
            },1000)
          })
      }
  }

demo案例如下圖：

分工明確，這樣看著清晰明瞭，操作起來也很方便；

擴充套件：其實在matations中也可以實現非同步操作，或者不需要mutations，直接在action中去更改state狀態，頁面功能也都可以正常使用並顯示；但是上面說到了，如果Vuex沒有操作規則，大家都隨心所欲的去編寫邏輯程式碼，devtools工具也不會正確跟蹤，那樣也不便於後期維護，程式碼一樣很亂，所以我們還是聽從Vuex官方推薦的標準去使用；

還有一個modules模組沒有介紹，不要著急，目前我們只是實現了單個元件與Vuex關聯，只是介紹了核心屬性的api用法，還沒有實現多元件資料共用；

下面就把專案中兩個元件的詳細的Vuex版本程式碼分享出來，作為參考。

六. 使用Vuex元件的完整程式碼

store倉庫程式碼

import Vue from 'vue'
import Vuex from 'vuex'
import {message} from 'element-ui'
Vue.use(Vuex)

const store =  new Vuex.Store({
  state: {
    count:0,
    filterTable:[]
  },

  getters:{
    multipleCount(state){
      return state.count * 10
    }
  },

  mutations: {
    JIA(state,count){
      state.count += count
    },
    JIAN(state,count){
      state.count -= count
      if(state.count <= 0) state.count = 0
    },
    ADDPERSON(state,person){
      state.filterTable.push(...person)
    },
     //這個重置方法本不需要，只是為了元件使用commit
     //dispatch('restPerson')就可以實現，這裡為了下面講解知識點而用
    RESTPERSON(state,person){
        state.filterTable = []
        state.filterTable.push(...person)
     }
  },

  actions:{
    asyncJia(context,value){
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          context.commit('JIA',value)
          resolve()
        },1000)
      })  
    },
    oddJia({commit,state},value){
       if(state.count%2 !== 0){
        commit('JIA',value)
       }
    },
    addPerson({commit,state},obj){
      var isHave = true
      state.filterTable.forEach( e => {
          if(e.name == obj.value)  isHave = false
      })
      if(!isHave){
          message({
              message: '人員已新增！',
              type: 'warning',
              duration:1000
          })
          return
      }
      
      var person =  obj.options.filter( item => {
        return item.name == obj.value
      })
      commit('ADDPERSON',person)
    },
    restPerson({commit,state},value){
       state.filterTable = []
       commit('ADDPERSON',value)
    }
  },
})

export default store

計算總數案例

導航二計算總數案例元件程式碼，如下：

<template>
    <div>
        <h3 style="marginBotton:10px;">此時導航三元件內總人數為：???</h3>
        <h3>當前計算的和為：{{count}}</h3> 
        <h3 :style="{marginBottom:'10px'}">當前計算的和的10倍為：{{multipleCount }}</h3> 
        <el-select v-model.number="value" size="mini"  :style="{width:'60px'}" placeholder="0">
           ...
        </el-select>
        <el-button size="mini" @click="JIA(value)">+</el-button>
        <el-button size="mini" @click="JIAN(value)">-</el-button>
        <el-button size="mini" @click="oddJia(value)">和為奇數 +</el-button>
        <el-button size="mini" @click="asyncJia(value)">等1秒後 +</el-button>
        <el-button size="mini" @click="doubleAsync(value)">非同步 + 後再等1秒後 +</el-button>
    </div>
</template>
<script>
import {mapState,mapGetters,mapMutations, mapActions} from 'vuex'
export default {
    data(){
        return{  
            options: [
                {value: 1,label: '1'},
                ...
            ],
            value: null
            }
    },
    computed:{
        ...mapGetters(['multipleCount']),
        ...mapState(['count'])
    },
    methods:{
        ...mapMutations(['JIA','JIAN']),
        ...mapActions(['oddJia','asyncJia']),
        doubleAsync(){
            this.asyncJia(this.value).then(() => {
              setTimeout(() => {
                 this.JIA(this.value)
              },1000)
            })
        }
    }
}
</script>

新增人員案例

導航三新增人員案例程式碼，如下：

<template>
    <div>
         <el-select v-model="value" placeholder="請選擇新增人員">
            <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>
        <el-button  @click="addPerson">新增</el-button>
        <el-button  @click="rest">還原</el-button>
        <el-table
            :data="filterTable"
            :border='true'
            style="width: 100%;marginTop:10px">
             ... 
            </el-table-column>
        </el-table>
        <h3 style="marginTop:10px;">此時表格總人數為：{{filterTable.length}}</h3>
        <h3 style="marginTop:10px;">此時導航二元件的計算總和為：？？？</h3>
    </div>
</template>
<script>
export default {
    data() {
        return {
           value:'',
           options: [...],
           tableData: [...],
        }
    },
    computed:{
        filterTable(){
          return this.$store.state.filterTable
       },
    },
    mounted(){
       this.initTable()
    },
    methods:{
        initTable(){
            const person = this.filterTable.length == 0 ? this.tableData  :  this.filterTable
             this.$store.commit('RESTPERSON',person)
        },
        addPerson(){
            const obj = {
                value:this.value,
                options:this.options
            }
            this.$store.dispatch('addPerson',obj)
        },
        rest(){
           this.$store.dispatch('restPerson',this.tableData)
        }
    }
}
</script>

Vuex實現元件間資料共用

現在就算我不去介紹，大家也會用了，現在兩個元件所需彼此的資料已經放到了倉庫的state中，只需要直接獲取就行；

那我們就把兩個元件一直存在的 ”???“ 給他們獲取一下值；

計算總陣列件中獲取新增人員元件中表格的人員總數，如下：

   ...
   <h3 style="marginBotton:10px;">
      此時導航三元件內總人數為：{{filterTable.length}}
   </h3>
   <h3>當前計算的和為：{{count}}</h3> 
   ...
    computed:{
        //只需要引入state中的filterTable屬性即可
        ...mapState(['count','filterTable'])
    },
   ...

新增人員元件中獲取計算總數的值，如下：

 ...
 <h3 style="marginTop:10px;">
     此時表格總人數為：{{filterTable.length}}
 </h3>
 <h3 style="marginTop:10px;">此時導航二元件的計算總和為：{{count}}</h3>
  ...
    computed:{
      filterTable(){
          return this.$store.state.filterTable
       },
       count(){
          return this.$store.state.count
       },
    },
  ...

只要導航二計算元件中的計算總數值count發生變化，導航三新增人員元件內的計算總和也隨之變化；

只要導航三新增人員元件表格資料發生變化，導航二計算總陣列件內總人數也隨之變化；如下圖：

這樣就是實現了元件間資料的共用，簡單多了吧，你也可以像我這樣去練習；

七. Vuex模組化編碼(modules)

其實到目前為止，你已經基本上學會了Vuex的使用了，modules只是輔助我們把Vuex模組化，讓我們的程式碼更清晰明瞭，便於維護和開發，提高發開效率；

想一下，目前我們只是有兩個元件需要共用陣列，看著沒有問題，同樣要是有十幾個元件，幾十個元件也需要共用資料呢，難道我們要把所有共用的狀態和更改的業務邏輯都寫在一個state，mutations和actions中嗎，可以想到肯定很亂，怎麼辦，這就有了modules;

store模組化

如果要使用模組化編碼的話，store中的程式碼編寫會發生變化，元件引入的api不會沒有改變，但是寫法也會有所不同；

首先我們先來使store分成模組，目前我們有兩個元件，每個元件的state，mutations和actions都是獨立的，所以我們可以拆分兩個模組：

在store資料夾下建立一個count.js檔案，此檔案只屬於計算總數的狀態和業務邏輯，最後記得暴漏出去，如下：

const countOptions = {
   //這裡新增此屬性，是為了後面使用map輔助函數簡寫時可以找到該模組
    namespaced: true,
    state: {
        count:0,
    },
    getters:{
      multipleCount(state){
         return state.count * 10
      }
    },
    mutations: {
      JIA(state,count){
          state.count += count
      },
      JIAN(state,count){
	      state.count -= count
	      if(state.count <= 0) state.count = 0
      },
    },

    actions:{
      asyncJia(context,value){
	      return new Promise((resolve,reject) => {
	          setTimeout(() => {
	            context.commit('JIA',value)
	            resolve()
	          },1000)
	      })  
      },
      oddJia({commit,state},value){
	      if(state.count%2 !== 0){
	          commit('JIA',value)
	       }
      },
    },
}
export default countOptions

在store資料夾下建立一個addPerson.js檔案，此檔案只屬於新增人員的狀態和業務邏輯，最後也要暴露出去，如下：

import {message} from 'element-ui'
const addPersonOption = {
    namespaced: true,
    state: {
        filterTable:[]
    },
    mutations: {
      ADDPERSON(state,person){
          state.filterTable.push(...person)
      },
     //這個重置方法本不需要，只是為了元件使用commit
     //dispatch('restPerson')就可以實現，這裡為了下面講解知識點而用
      RESTPERSON(state,person){
        state.filterTable = []
        state.filterTable.push(...person)
      }
    },
    actions:{
      addPerson({commit,state},obj){
	       var isHave = true
	       state.filterTable.forEach( e => {
	           if(e.name == obj.value)  isHave = false
	       })
	       if(!isHave){
	           message({
	               message: '人員已新增！',
	               type: 'warning',
	               duration:1000
	           })
	           return
	       }  
	       var person =  obj.options.filter( item => {
	         return item.name == obj.value
	       })
	       commit('ADDPERSON',person)
      },
      restPerson({commit,state},value){
	        state.filterTable = []
	        commit('ADDPERSON',value)
      }
    },
}
export default addPersonOption

在store/index.js檔案裡面引入上面兩個模組元件，掛到如下modules中，如下：

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

import countOptions  from './count'
import addPersonOption from './addPerson'

const store =  new Vuex.Store({
  modules:{
    countOptions,
    addPersonOption
  }
})
export default store

這樣分成模組去開發，是不是，眼前一亮，清晰多啦；

模組化的元件呼叫

看到這裡不知道你是否發現，我在計算總陣列件裡面用的都是map函數呼叫方法；在新增人員元件用的都是this.$store.xx的呼叫方法；之所以這樣做就是為了現在使用模組化的時候給大家都全部介紹一下api在模組下的引入方式；

map輔助函數

名稱空間（namespaced）+ map輔助函數的簡單寫法去呼叫，寫法如下；

mapState函數的呼叫改為：

    computed:{
        ...mapState('countOptions',['count']),
        ...mapState('addPersonOption',['filterTable'])
    },

mapGetters函數的呼叫改為：

    computed:{
        ...mapGetters('countOptions',['multipleCount']),
    },

mapMutations函數的呼叫改為：

methods:{
     ...mapMutations('countOptions',['JIA','JIAN']),
 }

mapActions函數的呼叫改為：

methods:{
    ...mapActions('countOptions',['oddJia','asyncJia']),
 }

this.$store.xxx

獲取模組化states方法，state後面加上模組名，如下：

computed:{
   filterTable(){
      return this.$store.state.addPersonOption.filterTable
   },
   count(){
      return this.$store.state.countOptions.count
   },
},

獲取模組化mutations方法，在mutation函數名前加上 “模組名+/”，如下：

   methods:{
       initTable(){
            var person = this.filterTable.length == 0 ? this.tableData  :  this.filterTable
            this.$store.commit('addPersonOption/RESTPERSON',person)
        },
   }

為了瞭解獲取模組化getters的呼叫方法，我們給Vuex的addPersonOption模組新增一個getters方法獲取表格第一個人的名字，元件呼叫展示，程式碼如下：

 getters: {
      onePersonName(state){
         return state.filterTable[0].name
      }
 },

 computed:{
       onePersonName(){
           return this.$store.getters.['addPersonOption/onePersonName']
       }
  }

獲取模組化actions方法，如下：

 methods:{
     addPerson(){
          var obj = {
              value:this.value,
              options:this.options
          }
          this.$store.dispatch('addPersonOption/addPerson',obj)
      },
      rest(){
          this.$store.dispatch('addPersonOption/restPerson',this.tableData)
      }
 }

再給大家看一下demo，修改後，功能正常使用！完美！，圖如下：

八. 總結

好了，以上就是關於Vuex的所有知識點，因為最近又刷了一遍尚矽谷Vue的視訊，為了練習和總結，就寫了這篇將近18000字的關於Vuex部落格，應該算是很詳細，很詳細啦！

到此這篇關於一篇文章帶你吃透Vuex3的狀態管理的文章就介紹到這了,更多相關Vuex3狀態管理內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

一篇文章帶你吃透Vuex3的狀態管理

目錄

一. Vuex是什麼

Vue全域性事件匯流排

Vuex狀態管理

何時使用Vuex

二. 純vue元件案例

計算總數案例

新增人員案例

三. Vuex工作原理和流程

第一種工作流程

第二種工作流程

生活化的Vuex工作原理

四. 在專案中引入Vuex

安裝Vuex

建立store

在Vue中掛載store

五. Vuex的核心屬性用法

單一資料來源（state）

狀態更新方式（mutations）

store中的計算屬性（getters）

非同步更新狀態（actions）

同步增加總數

非同步增加總數

為什麼actions中處理非同步

六. 使用Vuex元件的完整程式碼

store倉庫程式碼

計算總數案例

新增人員案例

Vuex實現元件間資料共用

七. Vuex模組化編碼(modules)

store模組化

模組化的元件呼叫

map輔助函數

this.$store.xxx

八. 總結

熱門文章