programing

클래스 기반 접근 방식을 사용할 때 스토어 액션을 컴포넌트에 매핑하려면 어떻게 해야 합니까?

randomtip 2022. 8. 29. 21:52
반응형

클래스 기반 접근 방식을 사용할 때 스토어 액션을 컴포넌트에 매핑하려면 어떻게 해야 합니까?

이것은 나의 것이다vuejs클래스 기반 평가법을 사용하고 있습니다.

<template>
    //template body here
</template>

<script>
import Vue from "vue";
import moment from "moment";
import Component from "vue-class-component";
import { State, Action, Mutation, namespace } from "vuex-class";

const homeModule = namespace("../store/modules/list");  //path is OK

export default class List extends Vue {
    @State(state => state.list.apps) items;     //working properly
    @homeModule.Action("fetchItems") fetchItems;    //not working

    mounted() {
        this.fetchItems();
    }

}
</script>

이건 내 거야store/modules/list.js.

const state = {
    items: []
};

const mutations = {
    setItems(state, items) {
        state.items = items;
    }
};

const actions = {
    async fetchItems({ commit }) {
        const {data} = //Make a request for fetching the items
        commit('setItems', items);
    }
};

export default {
    namespaced: true,
    state,
    actions,
    mutations
};

이제 매장에서 상품 목록을 받을 수 있게 되었습니다.그러나 구성 요소를 사용하여 작업을 매핑할 수 없습니다.에러가 발생하고 있다.[vuex] module namespace not found in mapActions(): ../store/modules/list/

어떤 도움이라도 주시면 감사하겠습니다.고마워요.

문제가 해결되지 않으면 잘못된 경로를 통과하고 있는 것입니다.

const homeModule = namespace("../store/modules/list");

는 파일 경로가 아닌 이름 순으로 정렬된 스토어 경로여야 합니다.따라서 다음과 같습니다.

const homeModule = namespace("list");

모듈이 다음 위치에 등록되어 있는 경우list열쇠

언급URL : https://stackoverflow.com/questions/56631105/how-to-map-the-store-action-to-the-component-when-using-class-based-approach

반응형