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

【问题标题】：How to update Vuex state? (MEVN stack)如何更新 Vuex 状态？（MEVN 堆栈）
【发布时间】：2022-01-14 14:04:46
【问题描述】：

我正在做一个学校项目，目前我正在尝试 Vuex，我想从 Vuex 检索研讨会列表，但我似乎无法更新我的状态。

这是我的 Node 后端：

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

【问题讨论】：

标签： node.js vue.js axios vuex

【解决方案1】：

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

它是：

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

这也是无操作：

created() {
    this.getWorkshop
},

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

【讨论】：