Vuex状态在突变后不更新答案

【问题标题】：Vuex state not updating after mutationVuex状态在突变后不更新
【发布时间】：2019-11-30 13:01:52
【问题描述】：

我正在尝试在我的 Vue/Vuex 应用程序中使用突变为状态设置一些值。

component.vue

created() {
    let clubId = {'clubId': 31};
    this.$store.dispatch(
    "clubConfiguration/getClub",
    clubId 
  );
}

action.js

getClub(context, payload) {
    ApiService().post('/club/getSingleClub', {
        "ClubId": payload.clubId
    })
     .then(res => {
          context.commit('GET_CLUB_INFORMATION', res.data.data[0]);
     })
     .catch(err => {
           console.log(err)
    })
}

mutation.js

GET_CLUB_INFORMATION(state, payload) {
    state.Name = payload.Name
    console.log(state);
}

state.js

Name: '',
mapLocation: { lat: 39.585693, lng: 2.622868, zoom: 18 },
courts: [
    {
        id: 0,
        number: 1,
        name: 'Court 1',
        map: null
    }
]

现在，在 console.log 中，我在突变中显示有效负载中的“名称”与其他状态属性一起附加到状态。但是，当我检查 Vue 开发工具或尝试从组件访问 state.Name 时，它会显示状态为 undefined 的 state.Name 属性。我做错了什么？

【问题讨论】：

让我知道下面的答案是否有效，当我刚刚传递名称时它对我有用，请确保您在此处传递名称： context.commit('GET_CLUB_INFORMATION', res.data.data[ 0]);也许'res.data.data[0].name'，你也可以添加一个if (res.data.data[0] && res.data.data[0].name)，以防万一
服务器返回的数据是什么样的？您如何访问组件中的Name？如果您检查mapLocation 和courts，您是否看到它们的初始状态正确填充？

标签： javascript vue.js vuex

【解决方案1】：

找到了！你的突变应该是

 GET_CLUB_INFORMATION(state, payload) {
  state.Name = payload
  console.log(state);
 }

因为您传递的只是名称，而不是整个有效负载

【讨论】：