厦门建行网站首页,如何做deal网站推广,网站顶部导航,机械设备东莞网站建设模块化思想 我们之前的博文已经讲述了Vuex怎么使用命名空间实现模块化状态管理。详情可以看#xff1a;
Vuex命名空间及如何获取根模块、兄弟模块状态管理器_AI3D_WebEngineer的博客-CSDN博客https://blog.csdn.net/weixin_42274805/article/details/133269196?ops_request_…模块化思想 我们之前的博文已经讲述了Vuex怎么使用命名空间实现模块化状态管理。详情可以看
Vuex命名空间及如何获取根模块、兄弟模块状态管理器_AI3D_WebEngineer的博客-CSDN博客https://blog.csdn.net/weixin_42274805/article/details/133269196?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169839448016800182196324%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257Drequest_id169839448016800182196324biz_id0utm_mediumdistribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-133269196-null-null.nonecaseutm_term%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4spm1018.2226.3001.4450
动态模块场景 动态模块的设计理念是为了方便前端随时挂载和卸载状态管理器模块。 模块书写
import { dailyStatistics, getList } from /api/perception/index.js;
export const INSTALL_MODULE_PATH moduleStore/perception;
export default {namespaced: true,state: {dailyStatistics: {},recordsList: {}},mutations: {saveDailyStatistics(state, loadData) {state.dailyStatistics loadData;},saveRecordsList(state,loadData) {state.recordsList loadData}},actions: {/*** name 获取数据*/getDailyStatistics({ commit }) {return dailyStatistics().then(res {commit(saveDailyStatistics, res.data || {});});},getRecordsList({ commit }, {pageA,stepNum,info}) {...commit(saveRecordsList, {total:res.data.total,list})});}},getters: {mockFireHotData(state){return state.recordsList.list.map(t {t.eventType 3return t})}},
}; 与正常的模块没什么区别的只是多导出了一个路径变量。用于指定她在仓库里的位置。 挂载和卸载
import PERCEPTION_MODULE, {INSTALL_MODULE_PATH,} from /store/modules/perception; beforeCreate() {// 注册状态管理器模块this.$store.registerModule(INSTALL_MODULE_PATH, PERCEPTION_MODULE);},
beforeDestroy() {// 卸载管理器模块this.$store.unregisterModule(INSTALL_MODULE_PATH);
}, 此时挂载上去的仓库位于this.$store.moduleStore/perception里 使用
// 调用actions
await this.$store.dispatch(${INSTALL_MODULE_PATH}/getRecordsList, {...});
// 调用仓库
this.$store.state[INSTALL_MODULE_PATH].xxxx
// 调用mutations
this.$store.commit(${INSTALL_MODULE_PATH}/saveDailyStatistics, {...});
// 调用getter
this.$store.getters[${INSTALL_MODULE_PATH}/mockFireHotData]
