Vuex state 不更新数据

Question

我正在使用 Vuex 和 axios 从我的后端获取数据。 但是不知何故 state 属性userName没有在我的 Vue 单文件组件 (SFC) 中更新。

approot.js state

const state = {    
    userName: 'foo' 
};

吸气剂

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>

从后端获取数据的动作 axios

const actions = {
   async fetchMenuData({ commit }) {
      //fetch data from api controller
      const response = await axios.get('../api/Menu/GetMenu');

      console.log(response.data.userName); //not undefined        
      commit('setMenuData', response.data);
   }
}

突变设置 state 个变量

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

问题当我的单个文件组件调用 getUserName 时，它总是呈现“foo”，即硬编码值。 我对此感到非常困惑，因为我的 state 变量中的 rest 设置了相同的模式，而且我的组件获取它们没有问题。

任何人都知道出了什么问题或可以看到我的代码中的缺陷吗？ 将不胜感激。

Answer 1

使用突变仅设置数据。 和其他事情做的行动。 喜欢：

行动：

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

完全不确定，为什么会发生这种情况。 但是，我遇到了这个问题并通过这种方式解决了。

Answer 2

 axios.get('../api/Menu/GetMenu')
  .then(({ data }) => {
    commit('setUserName', data.userName);
  }).catch(error => {    })

最好在 then() 中提交