programing

vuex getter에서 메서드 사용

goodsources 2022. 8. 9. 22:59
반응형

vuex getter에서 메서드 사용

Vuex getter에서 .find() 메서드를 실행하려고 합니다.그러나 이렇게 하면 다음과 같은 오류가 발생합니다.

Uncaught TypeError: ur.find is not a function

문서 내용을 확인해보니 vuex Getter가 제공하는 user-object에서 .find()나 .forEach() 등의 메서드를 실행할 수 없는 이유를 이해할 수 없습니다.제가 뭘 잘못하고 있는 건가요, 아니면 이런 유형의 생각이 범위를 벗어난 건가요?

이것은 제 믹스인의 예시입니다.auth.js

export const auth = {
    methods: {
        y(r){
            const ur = this.$store.getters.getUserRoles;
            console.log(ur); // Returns {__ob__: Observer}...
            ur.find( uRole => { // ur.find is not a function
                return uRole === r
            })
        }
    }
};

메인 vue의 Vuex 인스턴스입니다.app.js

const store = new Vuex.Store({
    state: {
        user: {}
    },
    mutations: {
        setUser (state, data) {
            state.user = data;
        },
    },
    getters: {
        getUserRoles(state){
            return state.user.roles;
        }
    },
    actions: {
        getUser ({commit}) {
            axios.get('/api/user').then(response => {
                const data = response.data.data;
                commit('setUser', data);
            });
        }
    }
});

응답:/api/user:

{
  admin: true,
  projectManager: false,
  timeAdmin: false
}

언급URL : https://stackoverflow.com/questions/47691341/using-methods-on-vuex-getter

반응형