vuex 맵에서 이름 간격이 작동하지 않음 모듈 네임스페이스를 찾을 수 없음

vuex 맵에서 이름 간격이 작동하지 않음 모듈 네임스페이스를 찾을 수 없음

저는 작은 프로젝트를 개발하고 있는데 네임스페이스를 사용하여 같은 이름의 게터, 돌연변이, 액션을 피하고 싶습니다.

문서에서 설명한 바와 같이 모듈을 Import하여 저장해야 하며 맵은 올바른 모듈로의 경로를 수신해야 합니다.

경로를 생략하여 모든 것을 Import할 수 있지만 경로를 지정하면 mapActions()에 없는 모듈 이름 공간이 느려집니다.

이 오류는 getter와 액션 모두에서 발생합니다.

다음은 저의 스토어 모듈입니다.

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

StockCopy.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.displaces를 설정합니다.

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(): stocksCopy/에서 [vuex] 모듈 네임스페이스를 찾을 수 없습니다.

네임스페이스를 사용하려면 올바른 키는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>

인덱스 파일에 스토어를 Import하는 것을 잊은 것 같습니다.그래서 프로젝트에서 store folder로 가서 인덱스 파일로 가서 모듈을 Import합니다.

import example from "./module-example"

모듈에 예를 추가합니다.

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

여기서 "filename"은 스토어 이름입니다.인덱스 파일의 경로는 다음과 같습니다.

src/store/index.js

언급URL : https://stackoverflow.com/questions/52456980/name-spacing-not-working-in-vuex-maps-throwing-module-namespace-not-found