vuex Module將 store 分割成模塊的操作
由于使用單一狀態(tài)樹,應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí),store 對(duì)象就有可能變得相當(dāng)臃腫。
為了解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割:
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)
補(bǔ)充知識(shí):vuex實(shí)現(xiàn)模塊化分割,在不同類別的文件中放置對(duì)應(yīng)的數(shù)據(jù)及操作
目錄結(jié)構(gòu)為
store文件夾下有index.js 、modules文件夾,在modules文件夾下是你的模塊,最好通過功能命名
一級(jí)目錄:store
一級(jí)目錄下文件:index.js
二級(jí)目錄:modules
三級(jí)目錄demo
三級(jí)目錄下文件demo.js
三級(jí)目錄下文件getter.js
三級(jí)目錄下文件mutations.js
三級(jí)目錄下文件 state,js
各文件的內(nèi)容為
一級(jí)目錄下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;
三級(jí)目錄下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 }
三級(jí)目錄其他文件
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)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)登錄頁面的驗(yàn)證碼以及驗(yàn)證過程解析(面向新手)
這篇文章主要介紹了vue實(shí)現(xiàn)登錄頁面的驗(yàn)證碼以及驗(yàn)證過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動(dòng)操作的函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11Vue中避免濫用this去讀取data中數(shù)據(jù)
這篇文章主要介紹了Vue中避免濫用this去讀取data中數(shù)據(jù)的的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-03-03Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06使用Vant如何實(shí)現(xiàn)數(shù)據(jù)分頁,下拉加載
這篇文章主要介紹了使用Vant實(shí)現(xiàn)數(shù)據(jù)分頁及下拉加載方式。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06