我的VueJS应用程序(带Vuex(在本地环境中工作没有问题。但是,当我将其部署到开发环境中时。(process.env.NODE_ENV
等于"开发"(它在Vuex商店的一个模块中中断。(在这之后,我当然没有部署它来刺激(
上面说我在Vuex商店的modeuleX中导入的服务B是undefined
。这是我的项目结构:
src
├── App.vue
├── components
.
.
.
├── services
│ ├── index.js // file that exports services
│ ├── serviceA.js
│ ├── serviceB.js
│ └── serviceC.js
├── store
│ ├── index.js // file that exports Vuex store
│ ├── modules
│ │ ├── moduleX.js
│ │ ├── moduleY.js
│ │ └── moduleZ.js
.
.
.
store/index.js:
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import moduleX from './modules/moduleX';
import moduleY from './modules/moduleY';
import moduleZ from './modules/moduleZ';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
moduleX,
moduleY,
moduleZ,
},
plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : [],
});
services/index.js:
import serviceA from './serviceA';
import serviceB from './serviceB';
import serviceC from './serviceC';
export { serviceA, serviceB, serviceC };
services/serviceC.js(导入store
的服务(
import Vue from 'vue';
import { event } from 'vue-analytics';
import store from '@/store';
export default {
sendEvent(evt) {
console.log(store.getters['moduleX/something']);
event(evt);
}
};
services/serviceB.js:
export default {
someMethodB() {
return localStorage.getItem('bProp');
},
};
以下是我如何在store/modules/moduleX.js:中使用它
import { serviceA, serviceB, serviceC } from '@/services';
const defaults = {
aProp: serviceA.someMethodA(), // works
bProp: serviceB.someMethodB(), // NOT WORKING
};
export default {
namespaced: true,
state: { ...defaults },
getters: {
something: true,
},
mutations: {
// use serviceC here with no problem
},
};
服务A和服务C工作良好,但CCD_ 4是CCD_。正因为如此,该应用程序无法构建。
同样,它在localhost中运行良好。知道为什么会发生这种事吗?
您需要从函数中返回一个值。
export default {
someMethodB() {
return localStorage.getItem('bProp'); // *** RETURN HERE ***
},
};