Vuex 状态不更新数据答案

【问题标题】：Vuex state not updating dataVuex 状态不更新数据
【发布时间】：2020-05-18 23:07:24
【问题描述】：

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

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”，即硬编码值。我对此感到非常困惑，因为我的其余状态变量设置为相同的模式，并且我的组件在获取它们时没有问题。

有谁知道我的代码出了什么问题或能看出我的代码有缺陷吗？将不胜感激。

【问题讨论】：

fetchMenuData 没有发送？
如果你没有，你应该像这样在你的组件beforeMount生命周期中调度fetchMenuData，async beforeMount() {await this.$store.dispatch('fetchMenuData')}
嘿，提交时通过response.data.userName，并更改设置选项。 setMenuData(state, userName) { state.userName = userName; }
@hasan05 他已经通过menuData.userName 在setMenuDatamutation 中得到它
哦等等，你为什么将setMenuData定义为一个动作？

标签： javascript json vue.js vuex vue-sfc

【解决方案1】：

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

最好在 then() 中进行提交

【讨论】：

【解决方案2】：

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

行动：

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

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

【讨论】：