背景
有些component需要全局注册的，但是在main.js中全局注册又太麻烦了。
store采用modules方式分包，使用的时候也要手动注册。
store刷新丢失，需要持久化。
这时候解决前两个问题，可以使用require.context
解决最后一个问题可以使用vuex-persistedstate
require.context
1.require.context是什么？
Vue内置了webpack的部分配置，这个咱们就不多说了。
require.context是webpack的api。
2.require.context能干什么？
通过执行require.context()函数可以获取一个特定的上下文，主要用来实现自动化导入模块。
它允许您传递要搜索的目录，指示是否也应搜索子目录的标志以及用于匹配文件的正则表达式，然后自动导入，使得不需要每次显式的调用import导入模块。
require.context()在构建时，webpack在代码中进行解析。
全局自动注册component
新建一个放置全局组件的文件夹，例如：components
在components文件夹下新建一个js文件，例如：autoRegister.js
vue2版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import Vue from 'vue';
const componentsContext = require.context('./', true, /index.(vue|js)$/);
componentsContext.keys().forEach((fileName) => {
const componentConfig = componentsContext(fileName).default;
if (/.vue$/.test(fileName)) {
console.log(componentConfig.name);
Vue.component(componentConfig.name, componentConfig);
} else {
Vue.use(componentConfig);
}
});
|
vue3版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const autoRegister = (app) => {
const componentsContext = require.context('./', true, /index.(vue|js)$/);
componentsContext.keys().forEach((fileName) => {
const componentConfig = componentsContext(fileName).default;
if (/.vue$/.test(fileName)) {
console.log(componentConfig.name);
app.component(componentConfig.name, componentConfig);
} else {
app.use(componentConfig);
}
});
};
export default autoRegister;
|
main.js中调用
1
2
3
4
5
6
|
import '@/components/autoRegister';
import autoRegister from './components/autoRegister';
autoRegister(app);
|
自动分module注册store
我们在store文件夹下新建一个index.js和一个modules文件夹
vue2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
})
export default store
|
vue3:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import { createStore } from 'vuex';
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = createStore({
modules,
strict: process.env.NODE_ENV !== 'production',
});
export default store;
|
关于分包的store，举个例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const state = {
};
const actions = {
};
const mutations = {
};
export default {
namespaced: true,
state,
mutations,
actions,
};
|
使用
1
| store.state.exampleStore.xxx
|
vuex持久化
持久化用vuex-persistedstate，这没有什么好说的了，用法看文档。
这里要说的是配合require.context，如何让每个store里加上持久化
在导出的时候我们可以看到，其实导出了一堆属性，最后都是通过
modules[moduleName] = value.default
的方式注入
那我们是否可以多导出一个属性，通过一些方式，让指定属性用于本地持久化呢？
答案是：可以
我们对上面的东西稍作演化
1.修改modules中的模块导出
1
2
3
4
5
6
7
| export default { export default {
namespaced: true, namespaced: true,
state, => state,
mutations, mutations,
actions, actions,
}; localStorage: ['name'],//假设state中需要持久化的key为name
}
|
2.在自动倒入中稍加判断是否存在localStorage
vue2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const modules = {};
const modulePluginPaths = [];
const requireModule = require.context('./modules', false, /.js$/);
requireModule.keys().forEach((fileName) => {
modules[fileName.slice(2, -3)] = requireModule(fileName).default;
if (requireModule(fileName).default.localStorage?.length > 0) {
requireModule(fileName).default.localStorage.forEach((item) => {
modulePluginPaths.push(`${fileName.slice(2, -3)}.${item}`);
});
}
});
const store = new Vuex.Store({
modules,
strict: process.env.NODE_ENV !== 'production',
plugins: [
createPersistedState({
paths: modulePluginPaths,
}),
],
});
export default store;
|
vue3:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';
const modules = {};
const modulePluginPaths = [];
const requireModule = require.context('./modules', false, /.js$/);
requireModule.keys().forEach((fileName) => {
modules[fileName.slice(2, -3)] = requireModule(fileName).default;
if (requireModule(fileName).default.localStorage?.length > 0) {
requireModule(fileName).default.localStorage.forEach((item) => {
modulePluginPaths.push(`${fileName.slice(2, -3)}.${item}`);
});
}
});
const store = createStore({
modules,
strict: process.env.NODE_ENV !== 'production',
plugins: [
createPersistedState({
paths: modulePluginPaths,
}),
],
});
export default store;
|
这样无论怎么刷新，你需要持久化的内容，都被存到了localstorage中，使用起来方便无感
以上内容，配合plop模板创建使用更加，请见
无星的前端之旅（十四）——巧用plop生成模板进行偷懒
