vuejs - 模板、商店、this.$store 未定义

Question

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

main.js

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

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

...
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()] : []
});

为什么那行不通？问题是否与 "template: UserDropdown" 有关？我认为每个组件都应该能够访问商店...

Answer 1

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

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

vuejs - 模板、商店、this.$store 未定义

vuejs - template, store, this.$store is undefined

syncfusion

vue.js

vue-component

vuex