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

Posted 2023-02-22

【中文标题】如何更新 Vuex 状态？ （MEVN 堆栈）

【英文标题】：How to update Vuex state? (MEVN stack)

【发布时间】：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 触发动作钩子，并且状态不会改变。如果有人知道我做错了什么，那将非常有帮助，因为我现在真的迷路了。提前谢谢！

【参考方案1】：

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

它是：

workshop_success( state , workshop) 
    state.workshop = workshop

这也是无操作：

created() 
    this.getWorkshop
,

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