Vuex не может использовать модули

Question

Я использую Vue с Webpacker с Rails. У меня возникли проблемы с Vuex, в частности при использовании модулей.

application.js:

import store from '../store/store'
Vue.prototype.$store = store;


document.addEventListener('turbolinks:load', () => {
  axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
  const app = new Vue({
    el: '[data-behavior="vue"]',
    store
  })
})

store.js:

import Vue from 'vue/dist/vue.esm'
import Vuex from 'vuex';
import axios from 'axios';
import itemstore from'./modules/itemstore'
Vue.use(Vuex)

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

const store = new Vuex.Store({
............
  modules: {
    itemstore
  }

})


export default store;

itemstore.js:

import axios from 'axios';


const itemstore = {
  state: {
    items: [],
},
actions: {
    loadItems ({ commit }) {
        axios
        .get('/items.json')
        .then(r => r.data)
        .then(items => {
            commit('SET_ITEMS', items);
        })
    }
},
mutations: {
    SET_ITEMS (state, items) {
        state.items = items
    }
},
}

export default itemstore;

В моем компоненте:

    mounted () {
      this.$store.dispatch('loadItems')
    },
    computed: {
        ...mapState([
            'items'
        ]),
      }

Во-первых, чтобы импортировать основной магазин, мне нужно Vue.prototype.$store = store;

Во-вторых, когда я перемещаю эти состояния, действия и мутации изstore.js to itemstore.js, элементы становятся неопределенными. Что я делаю не так?

Answer 1

Настройка namespaced приведет к тому, что actions, mutations и setters хранилища будут пространством имен на основе имени модуля. Однако state модуля всегда выделяется в его собственное поддерево в пределах state, даже если пространство имен не используется.

Так что это не будет работать:

...mapState([
   'items'
]),

Это ищет свойство items в корневом состоянии.

Вместо этого вы можете использовать что-то вроде:

...mapState({
    items: state => state.itemstore.items
})

У вас может возникнуть желание написать это так:

...mapState('itemstore', ['items'])

Однако передача имени модуля в качестве первого аргумента в mapState будет работать только с namespaced модулями.