vuex动态引入store modules
当时的场景是将原有的前端项目加入Vuex状态管理,Vuex的好处就不用多说了
刚开始的时候每添加一个新的Store文件,需要去主的index.js去单独import,然后放到modules下,
所以就想到用webpack提供的一些全局方法来动态的引入主文件下的每一个Store文件
主要解决的问题每次建一个module需要自己去主index.js里面去注册
为了偷懒,也为了避免团队开发时同时对index.js进行修改引发冲突
所以在index.js中 动态的对子目录和模块进行注册
我的目录结构是
- store
- index
- modules
- common
- index.js
- sys
- log.js
- base
- user.js
- dept.js
- area.js
- common
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const dynamicModules = {}
const files = require.context('.', true, /\.js$/) const dynamicImportModules = (modules, file, splits, index = 0) => {
if (index == 0 && splits[0] == 'modules') {
++index
}
if (splits.length == index + 1) {
if ('index' == splits[index]) {
modules[splits[index - 1]] = files(file).default
} else {
modules.modules[splits[index]] = files(file).default
}
} else {
let tmpModules = {}
if ('index' == splits[index + 1]) {
tmpModules = modules
} else {
modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : {namespaced: true, modules: {}}
tmpModules = modules[splits[index]]
}
dynamicImportModules(tmpModules, file, splits, ++index)
}
} files.keys().filter(file => file != './index.js').forEach(file => {
let splits = file.replace(/(\.\/|\.js)/g, '').split('\/');
dynamicImportModules(dynamicModules, file, splits)
}) export default new Vuex.Store({
modules: dynamicModules,
strict: process.env.NODE_ENV !== 'production'
})
vuex动态引入store modules的更多相关文章
- 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.
错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...
- jsp静态、动态引入其他jsp
1. <%@ include file="page.jsp"%> /*静态引入,内容必须写成固定值*/ 在servlet容器转化jsp为servlet时,将引入的 ...
- EXTJS动态改变store的proxy的params
动态改变store的条件参数.var store = win.down('grid[name=sourceGrid]').getStore(); Ext.apply(store.proxy.extra ...
- 关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)
ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...
- Vue src动态引入图片不显示问题
使用vue动态引入图片显示失败,查看控制台,发现图片返回类型为text/html,这里我的图片是从后台服务器上获取的,如果你没有使用Vue的devServer.proxy 进行代理,可以光速移步百度 ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- Vuex项目实战store
首先简单了解一下什么是Vuex? Vuex是一个专为Vue.js应用程序开发的状态管理模式.采用集中式存储来管理应用所有组件的状态. 以下是对vuex的使用的简单介绍: 一.安装 npm i vuex ...
随机推荐
- UWP 使用SSL证书,保证数据安全
事情是这样的,我们后端的小伙伴升级了用户会员系统,使用了全新的GraphQL登录机制,并且采用SSL加密的方式来实现阻止陌生客户端请求的案例. GraphQL在UWP端的实现,以后有时间会单独写一篇文 ...
- skipping archived logs of thread 1 from sequence 29 to 46; already backed up
问题描述:删除归档的备份,在进行归档的重新备份,提示:skipping archived logs of thread 1 from sequence 29 to 46; already backed ...
- .Net,Java,Redis,Vue等技术视屏教程分享(不定期更新)
前言 作为一个资深的收藏家决定把我收集的那些精品资源不定时更新分享给大家 .所有资源全是收集余网络或为大佬分享,内容仅供观摩学习交流之用.如果犯了您的权益,请联系我. 2019.12.19更新 ASP ...
- Redis有哪几种数据类型
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string 是 redi ...
- ES6对正则的改进(简要总结)
文章目录 正则的扩展 1. RegExp 构造函数 2. 字符串的正则方法 3. u 修饰符 4. y 修饰符 5. sticky 属性 6. flags 属性 7. s 修饰符:dotAll 模式 ...
- 《Dotnet9》系列-Google ProtoBuf在C#中的简单应用
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- Instrument API介绍
1. Instrumentation介绍 JVMTI(JVM Tool Interface)是 Java 虚拟机所提供的 native 编程接口,是 JVMPI(Java Virtual Machi ...
- Linux Ipsec
准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 环境测试 modprobe ppp-compress ...
- Graylog 环境搭建与使用
graylog 官网地址: www.graylog.org graylog 简易架构图: graylog 生产架构图: graylog 有两个版本,1.企业版:2.开源版 下面使用开源版本搭建日志中心 ...
- java多层嵌套集合的json,如何获取多层集合中所需要的value
就很简单的一个问题折磨了整整一天,好在压抑的心情终于释放了,终于闲下来觉得是不是应该记录一下. 首先这个json串是从外网接口返回的数据,想要了解的朋友们可以复制到json解析器中看一下格式:http ...