Question

我正在将Vue与带有Rails的Webpacker一起使用。我在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移至itemstore.js时，项目变得不确定。我在做什么错了？

Answer 1

namespaced设置将导致存储的actions，mutations和setters根据模块名称来命名。但是，即使未使用命名空间，模块的state始终在state中被分隔成自己的子树。

所以这行不通：

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

这正在寻找处于根状态的items属性。

相反，您可以使用类似的内容：

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

您可能会想尝试这样写：

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

但是，将模块名称作为第一个参数传递给mapState只能用于namespaced个模块。

Vuex无法使用模块

1 个答案: