如何更新 Vuex 状态？（MEVN 堆栈）

Question

我正在做一个学校项目，目前我只是在试用 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)
        })
})

这是我在 Postman 中的结果：

这是我的 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获取车间状态，它显示一个简单的空对象“{}”（这是初始状态），但我似乎无法通过创建的钩子，状态不会改变。如果有人知道我做错了什么，那将非常有帮助，因为我现在真的迷路了。提前致谢！

Answer 1

state 不是状态而是突变等参数中的上下文对象。否则commit，等无法访问

是：

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

这也是空操作：

created() {
    this.getWorkshop
},

函数应该像 this.getWorkshop() 那样调用。

如何更新 Vuex 状态？（MEVN 堆栈）

How to update Vuex state? (MEVN stack)

node.js

vue.js

axios

vuex

如何更新 Vuex 状态？ （MEVN 堆栈）

How to update Vuex state? (MEVN stack)

node.js

vue.js

axios

vuex

如何更新 Vuex 状态？（MEVN 堆栈）