javascript - Vuex 状态在突变后不更新

Question

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

组件.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.Name 属性显示为 undefined 。我做错了什么？

Answer 1

找到了!你的突变应该是

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

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