Javascript Vuex状态不更新数据

我正在使用Vuex和axios从后端获取数据。但不知何故，my Vue单文件组件（SFC）中的状态属性

userName

没有更新

approt.js 状态

const state = {    
    userName: 'foo' 
};

getter

const getters = {
    getUserName: (state) => state.userName    
};

单个文件组件

<template>
  <div id="navbar">
    //cut for brievity          
    <span>{{getUserName}}</span>                          
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'navbar',
  computed: mapGetters(['getNumberOfJobMessages','getUserName']),
  //cut for brievity

}
</script>

<style scoped>
    //cut for brievity
</style>

变异设置状态变量

const mutations = {
    setMenuData(state, menuData) {        
       console.log(menuData.userName); //not undefined
       state.userName = menuData.userName;
       console.log(state.userName); //not undefined
    }
}

问题 当我的单个文件组件调用getUserName时，它总是呈现“foo”，即硬编码的值。我对此很困惑，因为我的其他状态变量都是用相同的模式设置的，我的组件在获取它们时没有问题

---

谁知道我的代码出了什么问题，或者能看到我的代码中有缺陷？我们将不胜感激

使用突变只设置数据。还有其他一些事情是在行动中做的。比如：

行动：

const actions = {
   async fetchMenuData({ commit }) {
      const response = await axios.get('../api/Menu/GetMenu');
      let userName = response.data.userName;
      commit('setUserName', userName);
   }
}

和突变：

const mutations = {
    setUserName(state, userName) {        
       state.userName = userName;
    }
}

别忘了分派函数

fetchMenuData

---

我不确定为什么会发生这种情况。但是，我面对这个问题，用这种方式解决了

fetchMenuData

未被调度？如果您没有调度，您应该在组件

beforeMount

生命周期中调度

fetchMenuData

，就像这样，

async beforeMount（）{等待这个。$store.dispatch（'fetchMenuData'）}

嘿，在提交时传递

response.data.userName

，并更改设置选项

setMenuData（state，userName）{state.userName=userName；}

@hasan05他已经用

menuData.userName

在

setMenuData

mutationOh等等，你为什么把

setMenuData

定义为一个动作？

const mutations = {
    setUserName(state, userName) {        
       state.userName = userName;
    }
}