突变后Vuex状态未更新

Question

我正在尝试使用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时，它将状态state中的state.Name属性显示为undefined 。 我做错了什么？

Answer 1

找到了！ 你的突变应该是

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

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