Vue.js 以下示例应用程序结构未定义此.$store

我正在尝试使用Vuex，如文档所示。但是，$store没有显示在Vue开发工具中，并且在我的代码中返回undefined。我用这个例子作为参考

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;
    }
  }
});

在store/index.js（按照示例布局）中，我有：

最后是在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
}

注意，我正在一个类似的庄园中导入我的路由器实例，它正在工作，router/index.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

，你的应用程序常量中不需要$。由于您刚刚导入了store，所以可以直接使用它

请尝试以下操作：

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;
    }
  }
});

---

这是可行的，但不应该是

$store

，

$vuex

或Vue开发工具中类似的东西，比如

$route

，这样我就可以看到数据了吗？Vue开发工具中有一个vuex选项卡。检查右上角，我明白了

未检测到Vuex存储

，但可能是因为我在Electron中使用它，Electron Forge添加了Vue开发工具。此外，我无法在既没有

store

、

this.store

、也没有文档记录的

this.$store

的子组件中使用该存储，它是未定义的。有什么想法吗？在created and computed中访问它。我对电子没有任何经验，所以我不知道它应该如何工作。您可以尝试在控制台中记录“this”。如果商店不存在，你可以导入它并像我之前展示的那样使用它。它本质上是一个chrome环境，但是开发工具必须单独连接。然而，这不应该影响

这个
，因为它仍然是一个浏览器环境。因此，当我在控制台上记录此
时，
$store
不存在。
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;
    }
  }
});