programing

vuex 모듈에서 getter를 정의하는 방법

sourcejob 2022. 7. 21. 23:35
반응형

vuex 모듈에서 getter를 정의하는 방법

vuex 모듈을 개선하려고 하지만 다음과 같은 오류가 발생합니다.

Uncaught Error: [vuex] getters should be function but "getters.getComments" in module "comments" is [].

/stores/syslog.displays(표준)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    comments: []
}

const getters = {
    getComments: state => state.comments
}
const mutations = {
    setComments(state, comments) {
        state.comments = comments
    }
}

const actions = {
    setComments(context, data) {
        context.commit('setComments', data)
    }
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

여기 vuex 스토어의 루트 상태를 포함한 my store.displays가 있습니다.

import Vue from 'vue';
import Vuex from 'vuex';
import commentsModule from './stores/comments'
Vue.use(Vuex);
const state = {
}

const getters = {
}

const mutations = {
}

const actions = {

}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    modules: {
        comments: commentsModule
    },
    actions
})

이 문제를 해결할 수 있도록 도와주실 수 있나요?시도했지만 무엇이 문제인지 이해하지 못했다.

  • 작성 중store에 대한 인스턴스store.js어느쪽이 좋은가
  • 다른 파일을 만들고 있습니다. store내부 인스턴스comment.js좋지 않다

먼저 내보내기 블록 변경 시도:comment.js다음과 같이 입력합니다.

export default {
    state,
    getters,
    mutations,
    actions
}

보다 모듈러적인 방법으로 시험해 보세요).

외부 모듈로 게터를 이동합니다.

예를 들면app/js/store/getters.js:

export const getComments = state => {
    return state.comments;
};

그리고 그 안에app/js/store/index.js예를 들어 다음과 같습니다.

import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        comments: [],
    },
    getters,
    // ...
});

언급URL : https://stackoverflow.com/questions/46999565/how-to-define-getters-on-vuex-module

반응형