vuejs - шаблон, магазин, this. $ store не определен

У меня проблема с получением хранилища vuex в компоненте vuejs. Моя архитектура довольно прямолинейна. Имею магазин с двумя модулями.

main.js

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

Events.vue - здесь я использую свой пользовательский компонент UserDropdown в компоненте syncfusion, но я не думаю, что это актуально. Первый регистрирует 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"? Я думал, что каждый компонент должен иметь доступ к магазину ...


vue.js vuex vue-component syncfusion
person user3603819    schedule 18.11.2019    source источник
comment
Как вы импортируете store в UserDropdown компонент?   -  person cccn    schedule 18.11.2019
comment
Как вы настроили свой магазин? Можете ли вы предоставить свой полный файл main.js и все, что импортировано, чтобы установить store в main.js. Вы звонили Vue.use(Vuex)?   -  person Frnak    schedule 18.11.2019
comment
Фрэнк Провост - я добавил store.js в свой пост. @cccn - Я не импортирую хранилище в UserDropdown, хранилище должно быть доступно везде, когда вы пишете сегмент, как показано выше в main.js. Это нормально работает со всеми моими компонентами, кроме UserDropdown.   -  person user3603819    schedule 18.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Судя по всему, нужно еще раз импортировать хранилище в компонент UserDropdown.vue. Для меня это не имеет никакого смысла, поскольку я импортировал магазин в новый экземпляр Vue, как показано выше. Вот фрагменты кода, которые нужно добавить в UserDropdown.vue

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