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

Posted 2023-02-23

【中文标题】vuejs - 模板，商店，this.$store 未定义

【英文标题】：vuejs - template, store, this.$store is undefined

【发布时间】：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 之外，我的所有组件都很好。

【参考方案1】：

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

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