欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuex Module將 store 分割成模塊的操作

 更新時(shí)間:2020年12月07日 08:39:57   作者:書院二層樓  
這篇文章主要介紹了vuex Module將 store 分割成模塊,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

由于使用單一狀態(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)文章

最新評(píng)論