Name spacing not working in vuex maps throwing module namespace not found
Posted By: Anonymous
I’m developing a small project and i want to be able to use namespaces to avoid getters, mutations, actions, with same names.
As described in docs, the modules must be imported to store, and maps must receive the path to the right module.
I can import everything by omitting the path, but it throws duplicate getter key, if i specify the path it throws module namespace not found in mapActions():
this errors happen in both getters and actions.
This is my store modules:
Stock.js
const state = {_x000D_
stocks: [_x000D_
{id: 1, name: 'BMW', price: 110},_x000D_
{id: 2, name: 'Google', price: 200},_x000D_
{id: 3, name: 'Apple', price: 250},_x000D_
{id: 4, name: 'Twitter', price: 8}_x000D_
]_x000D_
};_x000D_
const getters = {_x000D_
getStocks: state => state.stocks_x000D_
};_x000D_
const mutations = {_x000D_
setStocks: (state, data) => state.stocks = data_x000D_
};_x000D_
const actions = {_x000D_
SETSTOCKS: (store, data) => {_x000D_
store.commit('setStocks', data)_x000D_
}_x000D_
};_x000D_
_x000D_
export default {_x000D_
namespace: true,_x000D_
state,_x000D_
getters,_x000D_
mutations,_x000D_
actions_x000D_
};
_x000D_
_x000D_
_x000D_
StocksCopy.js
const state = {_x000D_
stocks: [_x000D_
{id: 1, name: 'Fiat', price: 110},_x000D_
{id: 2, name: 'Bing', price: 200},_x000D_
{id: 3, name: 'Microsoft', price: 250},_x000D_
{id: 4, name: 'Facebook', price: 8}_x000D_
]_x000D_
};_x000D_
const getters = {_x000D_
getStocks: state => state.stocks_x000D_
};_x000D_
const mutations = {_x000D_
setStocks: (state, data) => state.stocks = data_x000D_
};_x000D_
const actions = {_x000D_
SETSTOCKS: (store, data) => {_x000D_
store.commit('setStocks', data)_x000D_
}_x000D_
};_x000D_
_x000D_
export default {_x000D_
namespace: true,_x000D_
state,_x000D_
getters,_x000D_
mutations,_x000D_
actions_x000D_
}
_x000D_
_x000D_
_x000D_
store.js
import Vue from 'vue'_x000D_
import Vuex from 'vuex'_x000D_
import stocks from './modules/stocks'_x000D_
import stocksCopy from './modules/stocksCopy'_x000D_
_x000D_
Vue.use(Vuex);_x000D_
_x000D_
const debug = process.env.NODE_ENV !== 'production'_x000D_
_x000D_
export default new Vuex.Store({_x000D_
namespace: true,_x000D_
state: {_x000D_
_x000D_
},_x000D_
getters: {_x000D_
_x000D_
},_x000D_
mutations: {_x000D_
_x000D_
},_x000D_
actions: {_x000D_
_x000D_
},_x000D_
modules: {_x000D_
stocks,_x000D_
stocksCopy,_x000D_
_x000D_
},_x000D_
strict: true,_x000D_
});
_x000D_
_x000D_
_x000D_
Stocks.vue
<template>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<button class="btn btn-primary" @click="setStocks({name: 'test', price: 100})">set stocks</button>_x000D_
<button class="btn btn-primary" @click="setStocksCopy({name: 'test', price: 100})">set stocksCopy</button>_x000D_
</div>_x000D_
<div class="row">_x000D_
<pre>Stocks: {{stocksList}}</pre>_x000D_
</div>_x000D_
<div class="row">_x000D_
<pre>StocksCopy: {{stocks}}</pre>_x000D_
</div>_x000D_
<div class="row">_x000D_
<app-stocks-stock v-for="(stock) in stocksList" :stock="stock"></app-stocks-stock>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</template>_x000D_
_x000D_
<script>_x000D_
import { mapGetters, mapActions} from 'vuex'_x000D_
import Stock from './Stock.vue'_x000D_
export default {_x000D_
name: "Stocks",_x000D_
components: {_x000D_
'app-stocks-stock': Stock_x000D_
},_x000D_
computed: {_x000D_
...mapGetters({_x000D_
stocksList: 'getStocks',_x000D_
stocks: 'stocks'_x000D_
})_x000D_
_x000D_
},_x000D_
data() {_x000D_
return {_x000D_
_x000D_
}_x000D_
},_x000D_
methods: {_x000D_
...mapActions('stocksCopy', {_x000D_
setStocksCopy: 'SETSTOCKS'_x000D_
}),_x000D_
...mapActions('stocks', {_x000D_
setStocks: 'SETSTOCKS'_x000D_
}),_x000D_
}_x000D_
}_x000D_
</script>_x000D_
_x000D_
<style scoped>_x000D_
_x000D_
</style>
_x000D_
_x000D_
_x000D_
Errors:
[vuex] duplicate getter key: getStocks
[vuex] module namespace not found in mapActions(): stocksCopy/
Solution
To use namespace, the right key is namespaced: true
instead namespace: true
After you correct it, you can use paths like ‘moduleName/getterName’ or ‘moduleName/actionName’ in the functions mapGetters()
or mapActions()
var { mapGetters, mapActions} = Vuex_x000D_
_x000D_
const stock = {_x000D_
namespaced: true, // namespaced instead namespace_x000D_
state: {_x000D_
stocks: [_x000D_
{id: 1, name: 'BMW', price: 110},_x000D_
{id: 2, name: 'Google', price: 200},_x000D_
{id: 3, name: 'Apple', price: 250},_x000D_
{id: 4, name: 'Twitter', price: 8}_x000D_
]_x000D_
},_x000D_
getters: {_x000D_
getStocks: state => state.stocks_x000D_
},_x000D_
mutations: {_x000D_
setStocks: (state, data) => state.stocks = data_x000D_
},_x000D_
actions: {_x000D_
SETSTOCKS: (store, data) => {_x000D_
console.log('SETSTOCK in stock')_x000D_
store.commit('setStocks', data)_x000D_
}_x000D_
}_x000D_
}_x000D_
_x000D_
const stockCopy = {_x000D_
namespaced: true, // namespaced instead namespace_x000D_
state: {_x000D_
stocks: [_x000D_
{id: 1, name: 'Fiat', price: 110},_x000D_
{id: 2, name: 'Bing', price: 200},_x000D_
{id: 3, name: 'Microsoft', price: 250},_x000D_
{id: 4, name: 'Facebook', price: 8}_x000D_
]_x000D_
},_x000D_
getters: {_x000D_
getStocks: state => state.stocks_x000D_
},_x000D_
mutations: {_x000D_
setStocks: (state, data) => state.stocks = data_x000D_
},_x000D_
actions: {_x000D_
SETSTOCKS: (store, data) => {_x000D_
console.log('SETSTOCK in stockCopy')_x000D_
store.commit('setStocks', data)_x000D_
}_x000D_
}_x000D_
}_x000D_
_x000D_
const store = new Vuex.Store({_x000D_
modules: {_x000D_
stock,_x000D_
stockCopy_x000D_
},_x000D_
strict: true,_x000D_
})_x000D_
_x000D_
window.main = new Vue({_x000D_
el:'#vue',_x000D_
store,_x000D_
computed: {_x000D_
...mapGetters({_x000D_
stocksList1: 'stock/getStocks', // moduleName/getterName_x000D_
stocksList2: 'stockCopy/getStocks' // moduleName/getterName_x000D_
})_x000D_
},_x000D_
methods: {_x000D_
...mapActions({_x000D_
setStocksCopy: 'stockCopy/SETSTOCKS', // moduleName/actionName_x000D_
setStocks: 'stock/SETSTOCKS' // moduleName/actionName_x000D_
}),_x000D_
}_x000D_
})
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>_x000D_
<div id="vue">_x000D_
<button @click="setStocks({foo: 'bar'})">reset</button>_x000D_
{{ stocksList1 }}_x000D_
<hr>_x000D_
<button @click="setStocksCopy({bar:'foo'})">reset</button>_x000D_
_x000D_
{{ stocksList2 }}_x000D_
</div>
_x000D_
_x000D_
_x000D_
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.