最近，我一直在构建使用大量单独Vuex模块的大型应用程序。让我们看看其中之一（例如support-chat）。支持聊天位于其自己的单独页面上，在初始应用程序加载时用此模块污染商店将是多余的。我的目标是在页面加载时动态注册该模块。所以我的问题是–我应该在哪里，何时何地注册该模块？
我最终在页面组件的beforeCreate钩子中注册了该模块：
import supportChatModule from '@/vuex/modules/support-chat'
// ...
beforeCreate() {
this.$store.registerModule('support-chat',supportChatModule,{ preserveState: process.client })
},beforeDestroy() {
this.$store.unregisterModule('support-chat')
}
// ...
这种方法有什么陷阱？
如果您能分享解决该问题的方法，那就太好了。
我在这个问题上苦苦挣扎了很长时间。我终于想出了一种独特的方法。
为此，我以register方法将每个页面的unregister和router file模块移到router/index.js（我项目中的beforeEach）中，并添加了所需的模块每个path。
此方法可以改进。
路由器/index.js
router.beforeEach((to,from,next) => {
// unregister modules
if (from.meta.modules) {
for (const key in from.meta.modules.primary) {
if (to.meta.modules && to.meta.modules.primary.hasOwnProperty(key)) {
continue;
}
if (store.state.hasOwnProperty(key)) {
// don't unregister freeze modules
if (from.meta.modules.hasOwnProperty('freeze') && from.meta.modules.freeze.find(item => item == key)) {
continue;
}
store.unregisterModule(key);
}
}
}
// register modules
if (to.meta.modules) {
for (const key in to.meta.modules.primary) {
const module = to.meta.modules.primary[key]();
if (!store.state.hasOwnProperty(key)) {
store.registerModule(key,module.default);
}
}
}
});
我的路径是这样的：
{
path: 'users',name: 'users',meta: {
modules: {
primary: {
user: () => require('@/store/modules/moduleUser')
}
},},component: () => import('../views/users.vue')
},{
path: 'foods',name: 'foods',meta: {
modules: {
primary: {
food: () => require('@/store/modules/moduleFood'),user: () => require('@/store/modules/moduleUser')
},freeze: ['food']
},component: () => import('../views/foods.vue')
},,
如果我发现任何问题，我会更新我的答案
C:\Users\saqui\Downloads\my_js_project>node src/index.js
I think it worked?
bounds: 5979385.645656869 2085840.5000395626 6024741.001443654 2131293.9999859035 (cartesian)
pre-quantization: 0.00045355356240339045 0.0004545350040087592
topology: 1698 arcs,37009 points
topojson done
simplification: effective minimum area 0.00000299
simplification: retained 29608 / 37009 points (80%)
making top planes
making side planes
making bottom planes
C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:32605
for ( i = 0,il = triangles.length; i < il; i ++ ) {
^
TypeError: Cannot read property 'length' of null
at Object.triangulateShape (C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:32605:31)
at THREE.ShapeGeometry.addShape (C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:35513:32)
at THREE.ShapeGeometry.addShapeList (C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:35458:8)
at new THREE.ShapeGeometry (C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:35442:7)
at THREE.Shape.makeGeometry (C:\Users\saqui\Downloads\my_js_project\node_modules\three\three.js:32162:17)
at C:\Users\saqui\Downloads\my_js_project\node_modules\shp2stl\src\topojson2threejs.js:396:24
at Array.forEach (<anonymous>)
at topojson2threeJSBottomPlanes (C:\Users\saqui\Downloads\my_js_project\node_modules\shp2stl\src\topojson2threejs.js:392:20)
at topojson2threejs (C:\Users\saqui\Downloads\my_js_project\node_modules\shp2stl\src\topojson2threejs.js:76:16)
at topojson2stl (C:\Users\saqui\Downloads\my_js_project\node_modules\shp2stl\src\shp2stl.js:77:21)