0

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

approot.js 状态

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);
   }
}

突变设置状态变量

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

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

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

4

2 回答 2

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

最好在 then() 中进行提交

于 2021-09-25T19:35:53.747 回答
0

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

行动：

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

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

于 2020-02-03T08:38:44.810 回答