Name spacing not working in vuex maps throwing module namespace not found

by Code Error
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

_x000D_

_x000D_

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

_x000D_

_x000D_

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

_x000D_

_x000D_

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

_x000D_

_x000D_

<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()

_x000D_

_x000D_

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

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *