Vuex模塊化應用實踐示例

更新時間：2020年02月03日 11:02:29 作者：我是你班主任

這篇文章主要介紹了Vuex模塊化應用實踐示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

Vuex的應用場景

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

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

組織store目錄

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

src
├── ...
├── main.js
├── App.vue
└── store
  ├── index.js     # 我們組裝模塊并導出 store 的地方
  └── modules
    ├── product.js    # 產品模塊
    ├── 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: '<App/>',
 components: { App }
})

store的屬性

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

getters
相當于當前模塊state的計算屬性

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

actions
可以定義異步函數，并在回調中提交mutation，就相當于異步更新了state中的字段

vuex數據傳遞規(guī)則

使用方法

把窗口的高度和寬度存到Vuex中，并且每當窗口被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)一管理，方便維護，避免重復。
  // 當然，你也可以不這么寫。。
  // mutation事件接受的第一個參數是當前模塊的state對象
  // 第二個參數是提交事件時傳遞的附加參數
  [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

<!--上面的template我就不往這兒放了-->
<script>
 import { _on, _off, getClientWidth, getClientHeight } from './common/dom'
 import { MU_WIN_RESIZE } from './common/constants'
 import { mapMutations } from 'vuex'

 export default {
  name: 'app',
  data () {
   return {}
  },
  mounted () {
   this.handleResize()
   // 這里對addEventListener方法做了IE兼容處理，就不貼出來了，反正事件監(jiān)聽你們都會
   _on(window, 'resize', this.handleResize)
  },
  beforeDestroy () {
   _off(window, 'resize', this.handleResize)
  },
  methods: {
   // 對象展開運算符，不熟悉的同學該學學ES6了
   ...mapMutations({
    // 映射 this.winResize 為 this.$store.commit(MU_WIN_RESIZE)
    winResize: MU_WIN_RESIZE
   }),
   handleResize () {
    const winWidth = getClientWidth()
    const winHeight = getClientHeight()
    this.winResize({ winWidth, winHeight })
   }
  }
 }
</script>

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

<template>
 <div class="row">窗口高：{{winHeight}} 窗口寬：{{winWidth}}</div>
</template>
<script>
 import { mapState } from 'vuex'
 export default {
  name: 'test',
  data () {
   return {}
  },
  computed: {
   // 把state寫入計算屬性
   // 如果使用mapGetters也是寫入計算屬性
   ...mapState({
    winHeight: state => state.windowInfo.winHeight,
    winWidth: state => state.windowInfo.winWidth
   })
  },
 }
</script>

有的時候我們會從后端獲取一些下拉框選項的靜態(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函數第一個參數接受一個與 store 實例具有相同方法和屬性的 context 對象，
  // 因此你可以調用 context.commit 提交一個 mutation，
  // 或者通過 context.state 和 context.getters 來獲取 state 和 getters
  // 這里雖然能獲取到state，但是不建議直接修改state中的字段
  async getProductConstants ({ commit }, payload) {
   try {
    // 請求接口，如果需要參數可以通過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事件的位置需要注意一下，假設你有5個組件需要使用這個state，那就應該在這5個組件共同的父組件中調用一次action（找不到就在根實例中調用），然后在各個子組件中通過mapState或mapGetters獲取state，千萬不要每個組件使用前都調用一次action方法！

src/App.vue

<!--為了更直觀的展示action，把之前的代碼刪掉了-->
<script>
 import { mapActions } from 'vuex' // 注意是mapActions

 export default {
  name: 'app',
  data () {
   return {}
  },
  created () {
   // 觸發(fā)請求
   this.getProductConstants()
  }
  methods: {
   ...mapActions([
    // 映射 this.getProductConstants 為 this.$store.dispatch('getProductConstants')
    'getProductConstants'
   ])
  }
 }
</script>

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

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

<!--為了更直觀的展示action，把之前的代碼刪掉了-->
<script>
 import { mapActions } from 'vuex' // 注意是mapActions

 export default {
  name: 'app',
  data () {
   return {}
  },
  async created () {
   // 觸發(fā)請求
   await this.getProductConstants()
   // 接下來執(zhí)行的操作會等待上面函數完成才會執(zhí)行
  }
  methods: {
   ...mapActions([
    // 映射 this.getProductConstants 為 this.$store.dispatch('getProductConstants')
    'getProductConstants'
   ])
  }
 }
</script>

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

表單處理

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

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

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

<template>
 <input v-model="message">
</template>
<script>
  export default {
  name: 'app',
  data () {
   return {}
  },
  computed: {
   message: {
    get () {
     return this.$store.state.test.message
    },
    set (value) {
     this.$store.commit('updateMessage', value)
    }
   }
  }
  methods: {}
 }
</script>

Vuex持久化

推薦插件vuex-persist

安裝插件：

npm install --save vuex-persist

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

import VuexPersistence from 'vuex-persist'

const persist = new VuexPersistence({
 // 其他參數看文檔
 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)在刷新瀏覽器數據也不會重置了！

總結

以上就是vuex比較常規(guī)的操作了，第一次看官方文檔的我是懵逼的、無助的，但是用了一段時間vuex再重新看文檔的時候會有很多收獲。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

window.onload使用指南
我們經常使用 window.onload 來處理頁面，當頁面加載完成做一些事情。但這個 window.onload 是頁面全部加載完成，甚至包括圖片,下面我們就來詳細探討下window.onload的用法
2015-09-09
JavaScript簡單實現(xiàn)網頁回到頂部功能
JavaScript簡單實現(xiàn)網頁回到頂部功能,大家可以參考一下
2013-11-11
JavaScript canvas復刻蘋果發(fā)布會環(huán)形進度條
canvas 真是一個好東西，它給前端插上了想象的翅膀，伴隨著 h5 而來，將 web 代入了新的領域。本文將利用anvas復刻蘋果發(fā)布會環(huán)形進度條，感興趣的可以嘗試一下
2022-07-07
微信分享調用jssdk實例
這篇文章主要為大家詳細介紹了微信分享調用jssdk實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
uniapp中使用vuex并持久化的方法示例
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個倉庫,下面這篇文章主要給大家介紹了關于uniapp中如何使用vuex并持久化的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
zTree實現(xiàn)節(jié)點修改的實時刷新功能
在實際應用中會遇到動態(tài)操作樹各節(jié)點的需求，在增加樹節(jié)點后如何實時動態(tài)刷新樹就十分有必要了。這篇文章主要介紹了zTree實現(xiàn)節(jié)點修改的實時刷新功能,需要的朋友可以參考下
2017-03-03
JavaScript函數式編程實現(xiàn)介紹
函數式編程是一種編程范式,將整個程序都由函數調用以及函數組合構成。可以看成一條流水線,數據可以不斷地從一個函數的輸出流入另一個函數的輸入,最后輸出結果
2022-09-09
使用原生JS實現(xiàn)火鍋點餐小程序（面向對象思想）
這篇文章主要介紹了使用原生JS實現(xiàn)火鍋點餐小程序（面向對象思想）,在這里小程序使用的是es6開發(fā)標準，本文通過代碼展示，截圖的形式給大家介紹，需要的朋友可以參考下
2019-12-12
利用uni-app和uView實現(xiàn)多圖上傳功能全過程
最近在使用uniapp開發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關于利用uni-app和uView實現(xiàn)多圖上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
JS函數進階之prototy用法實例分析
這篇文章主要介紹了JS函數進階之prototy用法,結合實例形式分析了JavaScript函數中使用prototy擴展屬性相關操作技巧,需要的朋友可以參考下
2020-01-01