溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在vuex中利用Module怎么將 store 分割成模塊？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
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 的狀態
store.state.b // -> moduleB 的狀態補充知識：vuex實現模塊化分割，在不同類別的文件中放置對應的數據及操作
目錄結構為
store文件夾下有index.js 、modules文件夾，在modules文件夾下是你的模塊，最好通過功能命名
一級目錄：store
一級目錄下文件：index.js
二級目錄：modules
三級目錄demo
三級目錄下文件demo.js
三級目錄下文件getter.js
三級目錄下文件mutations.js
三級目錄下文件 state,js
各文件的內容為
一級目錄下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';
// 按需要導入
// import getters from './getters.js';
// import actions from './actions.js';
export default{
// 將導入的文件暴露出去
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 分割成模塊問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
