vue.js - Vuejs - vuex lazy load
问题描述
I have a fairly large VueJS SPA, and I just wanted to load the vuex modules on certain routes, using the lazy load.
I was following this article to reproduce this - https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/
However this is giving me an error in vuex.
Folder structure
root
|- store
| |- modules
| | |- auth.js
| | |- module2.js
| |- store.js
|- app.js
auth.js
const state = {
var1: {},
var2: false
}
const mutations = {
'MUTATION_1'(state, obj) {
// logic
}
}
const actions = {
action1({commit}) {
// logic
}
}
const getters = {
var1: state => state.var1,
var2: state => state.var2
}
export default {
state,
mutations,
actions,
getters
}
store.js -
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
import('./modules/auth.js').then(auth => {
store.registerModule('/login', auth);
});
export default store;
app.js -
import Vue from 'vue';
import store from './store/store';
import VueRouter from 'vue-router';
import { routes } from './routes/routes';
// vue-router config
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#app',
store,
router
});
error -
[vuex] unknown getter: var1
Any suggestion?
解决方案
store.registerModule('/login', auth);
上面的代码使用 soauth
的命名空间注册模块,login
以便从存储中访问其状态、getter、突变和操作,您必须在所有这些前面加上 path login/
。您收到错误是因为您可能store.getters.var1
在应该调用store.getters['login/var1']
.
推荐阅读
- sql-server - sql server join 并选择top 1
- android - Admob 显示实时广告,但发布后不显示
- html - Angular5中的翻译属性参数
- sql - 窗口中的 SQL 计数出现次数
- c# - 将数据成功插入SSIS中特定文件的表后,如何将文件一一移动到文件夹?
- angularjs - 如何从Angularjs中的url获取id
- php - 通过 cron 运行时许可证已过期
- android - 我一直在尝试将数据从移动应用程序(Android/IOS)推送到 kafka 代理?
- uwp - 在 UWP 中擦除部分描边
- android - Flutter Widgets 对齐没有响应