vuex Module將 store 分割成模塊的操作
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
補充知識：vuex實現(xiàn)模塊化分割，在不同類別的文件中放置對應(yīng)的數(shù)據(jù)及操作
目錄結(jié)構(gòu)為
store文件夾下有index.js 、modules文件夾，在modules文件夾下是你的模塊，最好通過功能命名
一級目錄：store
一級目錄下文件：index.js
二級目錄：modules
三級目錄demo
三級目錄下文件demo.js
三級目錄下文件getter.js
三級目錄下文件mutations.js
三級目錄下文件 state,js
各文件的內(nèi)容為
一級目錄下index.js
import Vue from 'vue'
import Vuex from 'vuex'
import demo from './modules/demo/demo.js';
Vue.use(Vuex);
const $store = new Vuex.Store({
modules: {
demo
}
});
export default $store;
三級目錄下demo.js
import state from './state.js';
import mutations from './mutations.js';
// 按需要導(dǎo)入
// import getters from './getters.js';
// import actions from './actions.js';
export default{
// 將導(dǎo)入的文件暴露出去
state,
mutations
}
三級目錄其他文件
export default{}
最后在main.js中掛載
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
//引入vuex
import store from './store'
//把vuex定義成全局組件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount();
以上這篇vuex Module將 store 分割成模塊就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析(面向新手)
這篇文章主要介紹了vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動操作的函數(shù),結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue中避免濫用this去讀取data中數(shù)據(jù)
這篇文章主要介紹了Vue中避免濫用this去讀取data中數(shù)據(jù)的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
本文主要介紹了Vue實現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue3?實現(xiàn)一個自定義toast?小彈窗,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了Vue路由跳轉(zhuǎn)問題記錄詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
使用Vant如何實現(xiàn)數(shù)據(jù)分頁,下拉加載
這篇文章主要介紹了使用Vant實現(xiàn)數(shù)據(jù)分頁及下拉加載方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了在vue里使用codemirror遇到問題，本文給大家記錄下來了,需要的朋友可以參考下2018-11-11