반응형
클래스 기반 접근 방식을 사용할 때 스토어 액션을 컴포넌트에 매핑하려면 어떻게 해야 합니까?
이것은 나의 것이다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
반응형
'programing' 카테고리의 다른 글
Vue.js의 한도를 초과하는 경우 이름의 일부만 표시 (0) | 2022.08.29 |
---|---|
Nuxt - 이전 경로를 찾는 방법 (0) | 2022.08.29 |
<< = >보다 빠릅니까? (0) | 2022.08.29 |
memset() return value의 용도는 무엇입니까? (0) | 2022.08.29 |
대화 상자를 열 때 대화 상자 내부의 포커스 텍스트 필드 설정 (0) | 2022.08.29 |