vuejs - template，store，this.$store未定义

Question

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

main.js

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

Events.vue -这里我在syncfusion组件中使用了我的自定义组件UserDropdown，但我不认为这是相关的。第一个片段注册UserDropdown，第二个片段将在您单击某个单元格时被调用，并返回我的自定义组件：

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

UserDropdown.vue -在这里我想使用存储，但结果是："this.$store is undefined“。从Events.vue等其他组件中访问存储区工作得很好。

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有关？我认为每个组件都应该能够访问存储...

Answer 1

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

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