Question

我在获取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未定义”。从其他组件（如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'})
...

Answer 2

尝试一下

<script>
export default {
  ...
  computed: {
    users() { // replace  users: function () { by users() {
        return this.$store.state.usersState.users;
    }
  }
  ...
}
</script>

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

2 个答案: