本文主要介紹如何使用vuex的modules將狀態(tài)數(shù)據(jù)根據(jù)不同模塊進(jìn)行劃分并分別管理以及如何使用mapGetters快速將狀態(tài)管理中的數(shù)據(jù)導(dǎo)入成local變量。

文章目錄

• 本系列前文傳送門(mén)
• 一、場(chǎng)景說(shuō)明
• 二、使用modules劃分不同模塊
• 三、使用Getters獲取狀態(tài)管理數(shù)據(jù)
• • Getter傳參
  • mapGetters 輔助函數(shù)

本系列前文傳送門(mén)

• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」01 快速入門(mén)：快速寫(xiě)一個(gè)Vue的HelloWorld項(xiàng)目
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」02 從單頁(yè)面到多頁(yè)面網(wǎng)站：使用路由實(shí)現(xiàn)網(wǎng)站多個(gè)頁(yè)面的展示和跳轉(zhuǎn)
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜頁(yè)面布局」03 學(xué)會(huì)夠用的CSS，實(shí)現(xiàn)任意你想要的頁(yè)面布局
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」04 快速掌握開(kāi)發(fā)網(wǎng)站需要的Vue基礎(chǔ)知識(shí)
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」05 Vue實(shí)戰(zhàn)：從零到一實(shí)現(xiàn)一個(gè)網(wǎng)站導(dǎo)航欄
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」06 公共組件與嵌套路由：讓每一個(gè)頁(yè)面都平等地?fù)碛袑?dǎo)航欄
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」07 前后端分離：如何在Vue中請(qǐng)求外部數(shù)據(jù)
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜后端開(kāi)發(fā)｜Flask」08 python接口開(kāi)發(fā)快速入門(mén)：技術(shù)選型&寫(xiě)一個(gè)HelloWorld接口
• 「網(wǎng)頁(yè)開(kāi)發(fā)｜前端開(kāi)發(fā)｜Vue」09 Vue狀態(tài)管理Vuex：讓頁(yè)面根據(jù)用戶登錄狀態(tài)渲染不同內(nèi)容

---

一、場(chǎng)景說(shuō)明

vuex用于vue開(kāi)發(fā)過(guò)程中的數(shù)據(jù)管理，但隨著網(wǎng)站功能增多，項(xiàng)目規(guī)模變大，需要管理的數(shù)據(jù)也自然會(huì)越來(lái)越多。如果我們把所有的數(shù)據(jù)都放在一起，那么在后期開(kāi)發(fā)過(guò)程可能會(huì)導(dǎo)致數(shù)據(jù)混淆（比如命名相似），或者是代碼集中在一處難以維護(hù)。

所以我們可以考慮將數(shù)據(jù)根據(jù)功能或者場(chǎng)景劃分成不同模塊，比如登錄模塊Login，然后使用modules關(guān)鍵字將不同模塊放入到store中。

二、使用modules劃分不同模塊

modules的用法其實(shí)很簡(jiǎn)單，如下：

const moduleA = {state: {name: "A",},mutations: {},actions: {},getters: {}
}const moduleB = {state: {name: "B",},mutations: {},actions: {}
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})console.log(store.state.a.name) // -> `moduleA`'s state
console.log(store.state.b.name) // -> `moduleB`'s state

我們?cè)谏鲜龃a中定義了兩個(gè)不同的模塊來(lái)儲(chǔ)存不同場(chǎng)景的模塊數(shù)據(jù)，在moduleA中變量name的值為A，在moduleB中變量name的值為B。

定義好各個(gè)模塊后，我們?cè)?code>store中放入字段名到具體模塊的對(duì)應(yīng)關(guān)系，{a: moduleA, b: moduleB}。之后我們就可以通過(guò)store.state.a訪問(wèn)到a（即moduleA）中的state，通過(guò)store.state.b訪問(wèn)到b（即moduleB）中的state。

所以我們就可以通過(guò)store.state.b.name獲取到moduleB中state的name字段，返回值為B。

進(jìn)一步，我們可以把moduleB的代碼獨(dú)立成文件，比如獨(dú)立到moduleB.store.js中，然后導(dǎo)入到一個(gè)總?cè)肟?#xff0c;比如store.js，達(dá)到跟業(yè)務(wù)邏輯代碼一樣模塊化的效果。

三、使用Getters獲取狀態(tài)管理數(shù)據(jù)

有時(shí)候我們需要基于store 中的state進(jìn)行一些計(jì)算。比如我們寫(xiě)一個(gè)清單應(yīng)用，有一個(gè)todo-list，需要對(duì)列表進(jìn)行過(guò)濾并計(jì)數(shù)：

computed: {doneTodosCount () {return this.$store.state.todos.filter(todo => todo.done).length}
}

同樣地，如果在多處都需要使用，那么我們要么要復(fù)制粘貼同一份代碼，這讓代碼變得冗余；要么我們把這個(gè)計(jì)算放到store的方法中供每個(gè)地方調(diào)用，這樣調(diào)用時(shí)需要使用commit()方式比較不便，并且可能因?yàn)橹貜?fù)計(jì)算影響性能。

所以vuex允許我們?cè)?code>store中定義getter（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。并且我們?cè)谠L問(wèn)時(shí)也可能像訪問(wèn)尋常變量一樣訪問(wèn)它們。如下：

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}}
})

于是我們就可以通過(guò)store.getters.doneTodos獲取數(shù)據(jù)，得到[{ id: 1, text: '...', done: true }]

在其他組件中，也可以直接在computed屬性中獲取這些數(shù)據(jù)，如下：

computed: {doneTodosCount () {return this.$store.getters.doneTodosCount}
}

Getter傳參

getter也可以返回一個(gè)函數(shù)，我們用函數(shù)調(diào)用的方式來(lái)把參數(shù)傳到getter的處理邏輯中，如下：

getters: {// ...getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}
}

在其他組件中，就可以有如下調(diào)用：

this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mapGetters 輔助函數(shù)

mapGetters輔助函數(shù)只有一個(gè)簡(jiǎn)單但實(shí)用的作用：將store中的getter映射到局部計(jì)算屬性，如下：

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}

上述代碼就可以直接幫助我們得到同名計(jì)算屬性: doneTodosCount，anotherGetter

如果我們希望重命名getter，則可以傳入對(duì)應(yīng)關(guān)系，如下：

...mapGetters({// 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`doneCount: 'doneTodosCount'
})

熟悉了以上這些內(nèi)容之后，基本就可以應(yīng)對(duì)狀態(tài)管理的常見(jiàn)場(chǎng)景，清晰地組織狀態(tài)管理代碼，避免隨著項(xiàng)目規(guī)模變大后代碼耦合影響開(kāi)發(fā)效率。

---

寫(xiě)文不易，如果對(duì)你有幫助的話，來(lái)一波點(diǎn)贊、收藏、關(guān)注吧~👇