Javascript 变异后Vuex状态未更新

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

组件.vue

action.js

突变

state.js

---

现在，在console.log中，我在代码中显示了有效负载中的“Name”与其他状态属性一起附加到状态。但是，当我签入Vue dev工具或尝试从组件访问state.Name时，状态中的state.Name属性显示为未定义。我做错了什么？

找到了！你的变异应该是

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

---

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

请让我知道下面的答案是否有效，我刚传递名称时它对我有效，请确保您在此处传递名称：context.commit'GET_CLUB_INFORMATION'，res.data.data[0]；可能是“res.data.data[0].name”，也可以添加if res.data.data[0]&&res.data.data[0].name，只是为了预防，服务器返回的数据是什么样子的？如何访问组件中的名称？如果您检查mapLocation和courts，您是否看到它们的初始状态已正确填充？

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

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

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

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