Vuex作為Vue全家桶的成員之一，重要性肯定不用多說，正在做Vue項目的同學(xué)，隨著項目需求、功能逐漸增加，用到Vuex也是早晚的事兒，作為一個前端，只能面對現(xiàn)實：學(xué)不動也得學(xué)！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),寧安企業(yè)網(wǎng)站建設(shè),寧安品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寧安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

這篇文章主要介紹Vuex在大型項目中的模塊化及持久化應(yīng)用實踐，下面正文開始

Vuex的應(yīng)用場景

• 多個組件視圖共享同一狀態(tài)時（如登錄狀態(tài)等）
• 多個組件需要改變同一個狀態(tài)時
• 多個組件需要互相傳遞參數(shù)且關(guān)系較為復(fù)雜，正常傳參方式變得難以維護時
• 持久化存儲某些數(shù)據(jù)

所以我們把組件共享的狀態(tài)抽離出來，不管組件間的關(guān)系如何，都通過Vuex來處理

組織store目錄

我們先按模塊化的方式組織store目錄，并在Vue根實例中注冊store，Vuex 通過 store 選項，提供了一種機制將狀態(tài)從根組件“注入”到每一個子組件中

src
├── ...
├── main.js
├── App.vue
└── store
  ├── index.js     # 我們組裝模塊并導(dǎo)出 store 的地方
  └── modules
    ├── product.js    # 產(chǎn)品模塊
    ├── windowInfo.js  # 窗口信息模塊
    └── user.js     # 登錄模塊

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import product from './modules/product'
import windowInfo from './modules/windowInfo'

Vue.use(Vuex)

export default new Vuex.Store({
 modules: {
  // 注冊modules中的模塊
  user,
  product，
  windowInfo
 }
})

src/main.js

import ...
import store from './store' // 添加這行

new Vue({
 el: '#app',
 router,
 store, // 注入到根實例
 template: '',
 components: { App }
})

store的屬性

state（狀態(tài)對象）
state中存放多頁面共享的狀態(tài)字段

getters
相當(dāng)于當(dāng)前模塊state的計算屬性

mutations
如果想更新state中的字段，提交mutations中定義的事件是唯一的方式（key為事件名，value是一個函數(shù)），但是這個事件函數(shù)必須是同步執(zhí)行的

actions
可以定義異步函數(shù)，并在回調(diào)中提交mutation，就相當(dāng)于異步更新了state中的字段

vuex數(shù)據(jù)傳遞規(guī)則

使用方法

把窗口的高度和寬度存到Vuex中，并且每當(dāng)窗口被resize，state中的高度和寬度自動更新

src/store/modules/windowInfo.js

import { MU_WIN_RESIZE } from '../../common/constants'
const windowInfo = {
 state: {
  // 初始化
  winHeight: 0,
  winWidth: 0
 },
 mutations: {
  // 這里把事件名統(tǒng)一抽離到constants.js統(tǒng)一管理，方便維護，避免重復(fù)。
  // 當(dāng)然，你也可以不這么寫。。
  // mutation事件接受的第一個參數(shù)是當(dāng)前模塊的state對象
  // 第二個參數(shù)是提交事件時傳遞的附加參數(shù)
  [MU_WIN_RESIZE] (state, payload) {
   const { winWidth, winHeight } = payload
   state.winWidth = winWidth
   state.winHeight = winHeight
  }
 },
 actions: {},
 getters: {}
}

export default windowInfo

src/common/constants.js

export const MU_WIN_RESIZE = 'MU_WIN_RESIZE' // 更新窗口尺寸

下面打開項目的根組件添加監(jiān)聽resize事件和提交mutation事件邏輯

src/App.vue

到這一步，在拖動窗口觸發(fā)‘resize'事件的時候，就會觸發(fā)‘MU_WIN_RESIZE'這個mutation事件并把窗口寬高寫入vuex，下面我們隨便找個頁面看能不能獲取到我們寫入的值

有的時候我們會從后端獲取一些下拉框選項的靜態(tài)常量，而且很多頁面都能用到，這個時候用Vuex是比較好的選擇，涉及到后端獲取，就要用到可以使用異步的actions了

src/store/modules/product.js

import {MU_PRODUCT_UPDATE_CONSTANTS} from '../../common/constants'

const product = {
 state: {
  productConstants: []
 },
 mutations: {
  [MU_PRODUCT_UPDATE_CONSTANTS] (state, payload) {
   state.productConstants = payload
  }
 },
 actions: {
  // action函數(shù)第一個參數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象，
  // 因此你可以調(diào)用 context.commit 提交一個 mutation，
  // 或者通過 context.state 和 context.getters 來獲取 state 和 getters
  // 這里雖然能獲取到state，但是不建議直接修改state中的字段
  async getProductConstants ({ commit }, payload) {
   try {
    // 請求接口，如果需要參數(shù)可以通過payload傳遞
    const res = await this.$api.product.getConstants()
    commit(MU_PRODUCT_UPDATE_CONSTANTS, res)
   } catch (e) {
    console.error(e)
   }
  }
 },
 getters: {}
}

export default product

下面觸發(fā)這個getProductConstants事件，觸發(fā)這個action事件的位置需要注意一下，假設(shè)你有5個組件需要使用這個state，那就應(yīng)該在這5個組件共同的父組件中調(diào)用一次action（找不到就在根實例中調(diào)用），然后在各個子組件中通過mapState或mapGetters獲取state，千萬不要每個組件使用前都調(diào)用一次action方法！

src/App.vue

mapGetters, mapMutations, mapActions，這幾個函數(shù)可以接受對象也可以接受數(shù)組作為參數(shù)，如果你需要在組件中以別的名字調(diào)用該事件（像上面的mapMutations）就可以傳入對象，key為新命名，value是store中定義的名字；否則的話傳數(shù)組就好了。

那么問題來了，既然是異步操作，我想在操作結(jié)束后干點兒別的怎么做呢？
很簡單，調(diào)用action中的異步函數(shù)（this.$store.dispatch）返回的是一個Promise，如果你跟我一樣用的是async await：

如果你用的不是async await那就麻煩一點，在actions中定義事件的時候return一個new Promise，官方文檔中有一個例子

表單處理

當(dāng)你把從state中獲取的字段填在v-model中時，如果用戶修改表單數(shù)據(jù)，v-model會嘗試直接修改store中的數(shù)據(jù)，這樣做會有兩個問題：

1. 破壞了vuex的數(shù)據(jù)傳遞規(guī)則，如果想修改state中的數(shù)據(jù)只能通過提交一個mutation
2. 控制臺報錯：計算屬性沒有setter

官方提供了兩種解決方法，我更傾向于下面這種，給計算屬性添加setter，并在setter中提交mutation修改state：

Vuex持久化

推薦插件vuex-persist

安裝插件：

npm install --save vuex-persist

引入、配置、加載插件：
src/store/persist.js

import VuexPersistence from 'vuex-persist'

const persist = new VuexPersistence({
 // 其他參數(shù)看文檔
 storage: window.sessionStorage
})
export default persist.plugin

src/store/index.js

import ...
import persist from './persist'

Vue.use(Vuex)

export default new Vuex.Store({
 modules: {
  user,
  product,
  windowInfo
 },
 plugins: [persist]
})

現(xiàn)在刷新瀏覽器數(shù)據(jù)也不會重置了！

總結(jié)

以上就是vuex比較常規(guī)的操作了，第一次看官方文檔的我是懵逼的、無助的，但是用了一段時間vuex再重新看文檔的時候會有很多收獲。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。