gpt4 book ai didi

webpack - 代码拆分 vuex 应用程序

转载 作者:行者123 更新时间:2023-12-05 06:38:56 25 4
gpt4 key购买 nike

我有一个 vuex商店,我想对其应用代码拆分。

正在关注 this tutorial我试过这个:

import Vuex from 'vuex'
import Vue from 'vue'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
strict: debug,
plugins: debug ? [createLogger] : [],
state: {
loading: false
},
mutations: {
toggleLoading: (state) => {
state.loading = !state.loading
}
},
getters: {
loading: state => state.loading
},
actions: {
toggleLoading: ({commit}) => {
commit('toggleLoading')
}
}
})

import('./modules/userModule').then(userModule => {
store.registerModule('user', userModule)
})
import('./modules/tenantsModule').then(tenantsModule => {
store.registerModule('tenants', tenantsModule)
})
import('./modules/updatesModule').then(updatesModule => {
store.registerModule('updates', updatesModule)
})

export default store

但是申请失败了:

webpack-internal:///24:739 [vuex] unknown getter: user

我做错了什么?

最佳答案

如果在您的模块中使用 export default,您需要通过点符号访问它(我在 4.2 下读到 here)。所以像下面这样的东西对我有用:

import('./modules/userModule').then(userModule => {
store.registerModule('user', userModule.default)
})

但是,我对这种方法遇到了一些问题。我经常在初始页面加载时使用商店,然后模块尚未加载。所以我在声明store的时候直接注册了store最初需要的部分,像这样:

import userModule from './modules/userModule'

Vue.use(Vuex);

export default new Vuex.Store({
modules: {userModule}
})

希望这对您有所帮助!

关于webpack - 代码拆分 vuex 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45351190/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com