Интервал имен не работает в vuex maps, пространство имен модуля выброса не найдено

Question

Я занимаюсь разработкой небольшого проекта и хочу иметь возможность использовать пространства имен, чтобы избежать геттеров, мутаций, действий с одинаковыми именами.

Как описано в документации, модули должны быть импортированы для хранения,и карты должны получить путь к нужному модулю.

Я могу импортировать все, пропустив путь, но он выдает дублирующий ключ получения, если я указываю путь, он выбрасывает пространство имен модуля, не найденное в mapActions ():

эта ошибка возникает как в геттерах, так и в действиях.

Это модули моего магазина:

Stock.js

const state = {
    stocks: [
        {id: 1, name: 'BMW', price: 110},
        {id: 2, name: 'Google', price: 200},
        {id: 3, name: 'Apple', price: 250},
        {id: 4, name: 'Twitter', price: 8}
    ]
};
const getters = {
    getStocks: state => state.stocks
};
const mutations = {
    setStocks: (state, data) => state.stocks = data
};
const actions = {
    SETSTOCKS: (store, data) => {
        store.commit('setStocks', data)
    }
};

export default {
    namespace: true,
    state,
    getters,
    mutations,
    actions
};

StocksCopy.js

const state = {
    stocks: [
        {id: 1, name: 'Fiat', price: 110},
        {id: 2, name: 'Bing', price: 200},
        {id: 3, name: 'Microsoft', price: 250},
        {id: 4, name: 'Facebook', price: 8}
    ]
};
const getters = {
    getStocks: state => state.stocks
};
const mutations = {
    setStocks: (state, data) => state.stocks = data
};
const actions = {
    SETSTOCKS: (store, data) => {
        store.commit('setStocks', data)
    }
};

export default {
    namespace: true,
    state,
    getters,
    mutations,
    actions
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import stocks from './modules/stocks'
import stocksCopy from './modules/stocksCopy'

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    namespace: true,
    state: {

    },
    getters: {

    },
    mutations: {

    },
    actions: {

    },
    modules: {
        stocks,
        stocksCopy,

    },
    strict: true,
});

Stocks.vue

    
        
            set stocks
            set stocksCopy
        
        
            Stocks: {{stocksList}}

StocksCopy: {{stocks}}

import {mapGetters, mapActions} из 'vuex' import Stock из './Stock.vue' export default {имя: "Stocks", компоненты: {'app-stocks-stock': Stock}, вычисляется: {... mapGetters ({stocksList:' getStocks ', stocks:' stocks '})}, data () {return {}}, методы: {... mapActions (' stocksCopy ',{setStocksCopy: 'SETSTOCKS'}), ... mapActions ('stocks', {setStocks: 'SETSTOCKS'}),}}

Answer 1

Чтобы использовать пространство имен , вместо правой клавиши будет namespaced: true namespace: true

После того, как вы исправите это, вы можете использовать пути, такие как 'moduleName / getterName' или 'moduleName / actionName'в функциях mapGetters() или mapActions()

var { mapGetters, mapActions} = Vuex

const stock = {
	namespaced: true, // namespaced instead namespace
	state: {
	  stocks: [
    	{id: 1, name: 'BMW', price: 110},
	    {id: 2, name: 'Google', price: 200},
	    {id: 3, name: 'Apple', price: 250},
	    {id: 4, name: 'Twitter', price: 8}
    ]
	},
	getters: {
    getStocks: state => state.stocks
	},
	mutations: {
    setStocks: (state, data) => state.stocks = data
	},
	actions: {
    SETSTOCKS: (store, data) => {
    	console.log('SETSTOCK in stock')
      store.commit('setStocks', data)
    }
	}
}

const stockCopy = {
	namespaced: true, // namespaced instead namespace
	state: {
	  stocks: [
    	{id: 1, name: 'Fiat', price: 110},
      {id: 2, name: 'Bing', price: 200},
      {id: 3, name: 'Microsoft', price: 250},
      {id: 4, name: 'Facebook', price: 8}
    ]
	},
	getters: {
    getStocks: state => state.stocks
	},
	mutations: {
    setStocks: (state, data) => state.stocks = data
	},
	actions: {
    SETSTOCKS: (store, data) => {
      console.log('SETSTOCK in stockCopy')
      store.commit('setStocks', data)
    }
	}
}

const store = new Vuex.Store({
	modules: {
  	stock,
    stockCopy
  },
  strict: true,
})

window.main = new Vue({
	el:'#vue',
  store,
  computed: {
    ...mapGetters({
      stocksList1: 'stock/getStocks',  // moduleName/getterName
      stocksList2: 'stockCopy/getStocks'  // moduleName/getterName
    })
  },
  methods: {
    ...mapActions({
      setStocksCopy: 'stockCopy/SETSTOCKS', // moduleName/actionName
      setStocks: 'stock/SETSTOCKS' // moduleName/actionName
    }),
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="vue">
<button @click="setStocks({foo: 'bar'})">reset</button>
{{ stocksList1 }}
<hr>
<button @click="setStocksCopy({bar:'foo'})">reset</button>

{{ stocksList2 }}
</div>