this.$store 在示例应用程序结构中未定义

Question

我正在尝试使用 Vuex，如应用程序结构文档所示。但是，$store没有显示在 Vue 开发工具中，并且在我的代码中返回未定义。我使用购物车示例作为参考。

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';
const app = new Vue({
el: '#app',
store,
router,
computed: {
loading() {
return this.$store.state.application.loading.active;
}
}
});

在商店/索引中.js(按照示例布局(我有：

import Vue from 'vue';
import Vuex from 'vuex';
import application from './modules/application';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
application
}
});

最后在商店/模块/应用程序中.js：

const state = {
loading: {
active: true,
message: ''
},
syncing: {
active: false,
message: ''
}
}
const getters = {
//
}
const actions = {
//
}
const mutations = {
/**
* Update Loading
* 
* @param {*} state 
* @param {string} appState
* @param {boolean} active 
* @param {string} message 
*/
updateAppState(state, appState = false, active = false, message = '') {
if (Object.keys(state).includes(appState)) {
state.appState = {
active: active,
message: message
}
}
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

请注意，我正在类似的庄园中导入我的路由器实例，并且它正在工作，路由器/索引.js：

import Vue from 'vue/dist/vue';
import VueRouter from 'vue-router';
import ContentDefault from '../components/main/ContentDefault';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
// Default view
path: '/',
components: {
default: ContentDefault
},
}
]
});

编辑：附带问题，无法访问子组件中的$store，这是因为我在主应用程序和存储文件中导入了不同版本的 Vue，vue而不是vue/dist/vue

Answer 1

你不需要你的应用程序中的 $。而且由于您刚刚导入商店，因此可以直接使用它。

请尝试以下操作：

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';
const app = new Vue({
el: '#app',
store,
router,
computed: {
loading() {
return store.state.application.loading.active;
}
}
});