Question

我正在开发一个小项目，我希望能够使用命名空间来避免使用具有相同名称的getter，变异，动作。

如文档所述，必须导入模块以进行存储，并且地图必须接收正确模块的路径。

我可以通过省略路径来导入所有内容，但是如果我指定路径，它将抛出重复的getter键：它抛出在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

<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 /

Answer 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>

Answer 2

我认为您忘记了将存储导入索引文件中，因此在您的项目中转到存储文件夹，然后转到索引文件并导入模块

import example from "./module-example"

并将示例添加到模块

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },

其中“示例”是商店的名称，并且索引文件的路径为

src/store/index.js

在vuex映射中找不到名称间距，导致找不到模块命名空间

2 个答案: