Vuex 상태 업데이트 방법(MEVN 스택)

Vuex 상태 업데이트 방법(MEVN 스택)

학교 프로젝트를 하고 있는데 Vuex를 시험해 보고 있는데 Vuex에서 워크샵 목록을 가져오고 싶은데 상태를 업데이트할 수 없는 것 같습니다.

노드 백엔드는 다음과 같습니다.

router.get('/all', (req, res) => {
    Workshop.find({})
        .then( workshop => {
            return res.status(201).json({
                workshop: workshop,
                success: true
            })
        })
        .catch( err => {
            console.log(err)
        })
})

이것이 우체국에서의 나의 결과입니다.

Vuex 스토어입니다.

import axios from 'axios'

const state = {
    workshop: {}
}

const getters = {
    workshop: state => state.workshop
}

const actions = {
    async getWorkshop({ commit }) {
        let res = await axios.get('http://localhost:5000/api/workshops/all');
        commit('workshop_success', res.data.workshop);
        return res.data.workshop;
    }
};

const mutations = {
    workshop_success(state, workshop) {
        state.workshop = workshop
    }
};

export default {
    state,
    getters,
    actions,
    mutations
}

이것은 나의 컴포넌트입니다.

<template>
    <p>{{ workshop }}</p>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
    computed: {
        ...mapGetters(['workshop'])
    },
    methods: {
        ...mapActions(['getWorkshop'])
    },
    created() {
        this.getWorkshop
    },
}
</script>

문제는 Vuex를 통해 워크샵 상태를 가져올 수 있으며 단순한 빈 개체 "{}"(초기 상태)가 표시되지만 생성된 후크를 통해 작업을 트리거할 수 없고 상태가 변경되지 않는다는 것입니다.내가 뭘 잘못했는지 아는 사람이 있다면 정말 도움이 될 거야, 왜냐하면 난 지금 정말 길을 잃었거든.잘 부탁드립니다!

state는 상태가 아니라 변환 등의 파라미터의 컨텍스트오브젝트입니다.그렇지않으면commit, 등에 액세스 할 수 없었습니다.

그 이유는 다음과 같습니다.

workshop_success({ state }, workshop) {
    state.workshop = workshop
}

이것도 no-op입니다.

created() {
    this.getWorkshop
},

함수는 다음과 같이 호출해야 합니다.this.getWorkshop().

언급URL : https://stackoverflow.com/questions/70295035/how-to-update-vuex-state-mevn-stack