vue.js - 名称间距在 vuex 映射中不起作用，未找到抛出模块命名空间

Question

我正在开发一个小项目，我希望能够使用名称空间来避免具有相同名称的 getter、mutations、actions。

如文档中所述，必须导入模块才能存储，并且地图必须接收到正确模块的路径。

我可以通过省略路径来导入所有内容，但它会抛出重复的 getter 键，如果我指定它抛出在 mapActions() 中找不到的模块命名空间的路径：

这个错误发生在 getter 和 action 中。

这是我的商店模块：

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,
});

股票.vue

<template>
    <div class="container">
        <div class="row">
            <button class="btn btn-primary" @click="setStocks({name: 'test', price: 100})">set stocks</button>
            <button class="btn btn-primary" @click="setStocksCopy({name: 'test', price: 100})">set stocksCopy</button>
        </div>
        <div class="row">
            <pre>Stocks: {{stocksList}}</pre>
        </div>
        <div class="row">
            <pre>StocksCopy: {{stocks}}</pre>
        </div>
        <div class="row">
            <app-stocks-stock v-for="(stock) in stocksList" :stock="stock"></app-stocks-stock>
        </div>

    </div>
</template>

<script>
    import { mapGetters, mapActions} from 'vuex'
    import Stock from './Stock.vue'
    export default {
        name: "Stocks",
        components: {
            'app-stocks-stock': Stock
        },
        computed: {
            ...mapGetters({
                stocksList: 'getStocks',
                stocks: 'stocks'
            })

        },
        data() {
            return {

            }
        },
        methods: {
            ...mapActions('stocksCopy', {
                setStocksCopy: 'SETSTOCKS'
            }),
            ...mapActions('stocks', {
                setStocks: 'SETSTOCKS'
            }),
        }
    }
</script>

<style scoped>

</style>

错误：

[vuex] 重复的 getter 键：getStocks

[vuex] 在 mapActions() 中找不到模块命名空间：stockCopy/

标签： vue.jsvuejs2namespacesmappingvuex

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>