vuejs - 模板，商店，this.$store 未定义答案

【问题标题】：vuejs - template, store, this.$store is undefinedvuejs - 模板，商店，this.$store 未定义
【发布时间】：2020-03-13 19:28:25
【问题描述】：

我在 vuejs 组件中检索 vuex 存储时遇到问题。我的架构非常简单。我有一个有两个模块的商店。

main.js

new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: {
    App
  },

Events.vue - 这里我在一个同步融合组件中使用了我的自定义组件 UserDropdown，但我认为这无关紧要。第一个注册 UserDropdown，第二个片段将在您单击单元格时调用并返回我的自定义组件：

...
components: {
            UserDropdown
        },
...
editTemplate: function () {
   return {template: UserDropdown}
},
...

UserDropdown.vue - 这里我想使用商店，但结果是：“this.$store is undefined”。从其他组件（如 Events.vue）中访问 store 就可以了。

computed: {
        users: function () {
            return this.$store.state.usersState.users;
        }

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import projectsState from './modules/projectsStore'
import usersState from './modules/usersStore'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export const store = new Vuex.Store({
  modules: {
    projectsState,
    usersState
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
});

为什么这不起作用？问题与“模板：UserDropdown”有关吗？我认为每个组件都应该能够访问商店...

【问题讨论】：

如何在UserDropdown组件中导入store？
您是如何设置商店的？您能否提供完整的 main.js 以及导入的任何内容以在 main.js 中设置 store。你给Vue.use(Vuex)打过电话吗？
Frank Provost - 我将 store.js 添加到我的帖子中。 @cccn - 我不在 UserDropdown 中导入存储，当您在 main.js 中编写如上所示的段时，存储应该随处可用。除了 UserDropdown 之外，我的所有组件都很好。

标签： vue.js vue-component vuex syncfusion

【解决方案1】：

看起来，必须在 UserDropdown.vue 组件中再次导入 store。这对我来说没有任何意义，因为我在新的 Vue 实例中导入了商店，如上所示。这里的代码片段要添加到UserDropdown.vue中

...
import {store} from "../store/store";
...
export default {
    store,
    name: 'UserDropdown',
...
...mapGetters({users: 'usersState/AllUsers'})
...

【讨论】：