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)文章
vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3發(fā)布正式版不久，生態(tài)還沒完全發(fā)展起來，目前支持vue3的開源markdown編輯器組件基本上也寥寥無幾，向大家推薦一個(gè)很好用的v-md-editor 組件，組件功能很強(qiáng)大，文檔也比較詳細(xì)。該文章只介紹組件的常用功能，更多高級(jí)的功能可以參考官方文檔。2021-05-05
vue滾動(dòng)插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化，通過綁定數(shù)據(jù)即可以實(shí)時(shí)改變視圖顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了安裝Vue+webpack出現(xiàn)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實(shí)例解析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了vue-cli3 熱更新配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09