Vue 3：控制台说状态有 ID，但在 vuex 存储中，它是“null”

Question

我正在使用 Vue 3，并且在一个组件中我在数据库中创建了一个项目。当我控制台记录响应时，它具有 ID。在“UPDATE_STATE”中，payload 和 state 也有 ID，我们可以在控制台中看到它。但在那之后，vuex 商店没有 ID。这是怎么回事？

创建函数

createItem(context: any) {
  console.log(moment(new Date()).format("YYYY-MM-DD"))

  const data = {
    ...state,
    creationDate: moment(new Date()).format("YYYY-MM-DD"),
    dueDate: moment(new Date()).format("YYYY-MM-DD"),
  };
  console.log(data);
  axios
    .post("/link-is-here/", data, {
      headers: {
        Authorization: `Bearer ${context.rootState.user.accessToken}`,
      },
    })
    .then((res) => {
      console.log("res: " + JSON.stringify(res))
      context.commit("UPDATE_STATE", res.data)
    })
    .catch((err) => console.log(err));
},

UPDATE_STATE 函数

[UPDATE_STATE](state: any, payload: any) {

  console.log("payload:" + JSON.stringify(payload))
  state = payload
  console.log("state:" + JSON.stringify(state))
},

Answer 1

在您的示例中，您重写了状态变量，因此 vuex 不会收到任何有关状态已更改的通知

尝试逐个字段注入数据

import Vue from 'vue';



[UPDATE_STATE](state: any, payload: any) {
  console.log("payload:", payload)

  for(const field in payload){
    Vue.set(state, field, payload.state) 
    // that's almost same as state.field = payload.state but make new data reactive (https://vuejs.org/v2/guide/reactivity.html)
  }
 
  console.log("state:", state)
},

或者只是

Vue.set(state, 'scopeName', payload)