首页 文章

名称间距在vuex映射中无效，无法找到抛出模块命名空间

提问于
浏览 次
1

我正在开发一个小项目，我希望能够使用命名空间来避免使用相同名称的getter，mutation，actions .

如文档中所述，必须将模块导入到存储中，并且映射必须接收到正确模块的路径 .

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

这个错误发生在getter和actions中 .

这是我的商店模块：

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

<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

在mapActions（）中找不到[vuex]模块命名空间：stocksCopy /

vue.js vuejs2 namespaces mapping vuex

1 回答

  • 1

    要使用命名空间，右键是 namespaced: true 而不是 namespace: true

    更正后，您可以在函数 mapGetters() 或 mapActions() 中使用'moduleName/getterName'或'moduleName/actionName'等路径

    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>
    回复于

相关问题