為什么狀態在 vuex 中沒有更新？

Question

我正在使用帶有 axios 的 vuex 從后端獲取數據。 當我控制台記錄狀態時，它會顯示更新的狀態。 但是，當我調用狀態時，總是沒有數據。 有什么我錯過的嗎？

.vuex 文件

import axios from "axios"; 
import { uid } from "quasar";

const state = {
  data: {},
};

const mutations = { 
  addData(state, payload) {
    state.data[payload.id] = payload.data;
    console.log(state.data); //the data exist
  },
};



 const actions = {
      readData({ commit }) {
        axios({
          method: "get",
          url:
            "https://dev.activate.vi9e.com/api/purchase/receivegoods/index?action=list",
          headers: {
            "Content-Type": "application/json",
          },
        })
          .then((response) => {
            for (var i = 0; i < response.data.length - 1; i++) {
              let dataId = uid();
              let payload = {
                id: dataId,
                data: response.data[i],
              };
              commit("addData", payload);
            }
          })
          .catch((error) => {
            //handle error
            console.log("error message: ", error.message);
          });
      },
    };

const getters = {
  data: (state) => {
    return state.data;
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

這是我的模板：

<template>
  <p>{{ data }}</p>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  methods: {
    ...mapActions("incominggoods", ["readData"]),
  },
  computed: {
    ...mapGetters("incominggoods", ["data"]),
  },
  mounted() {
    this.readData();
  }

};
</script>

即使我在控制台登錄突變時都會獲取數據，但狀態中的數據根本沒有更新。 我怎樣才能解決這個問題？

解決方案感謝所有評論。 他們都值得解決問題。 問題是由於 vue 的反應性造成的。 Vue貌似不允許處理“對象”（非原始數據類型），也不允許對象通過數組賦值的方式來處理“對象”。 這是我根據評論所做的：

1. 我手動操作了從后端收到的數據（其中它具有“對象數據類型”（非原始數據類型）並將其更改為“對象數據類型”）。

在行動中（在那時（響應）內）

for (var i = 0; i < response.data.length; i++) {
          let dataId = uid();

         // manipulate the "object" to "Object"
          let data = {
            poid: response.data[i].purchase_order_id,
            podate: response.data[i].po_date,
            vendor: response.data[i].vendor_name,
            qty: "0%",
            total_qty_ordered: response.data[i].total_qty_ordered,
            total_qty_receivable: response.data[i].total_qty_receivable,
            total_qty_received: response.data[i].total_qty_received,
            status: response.data[i].status,
            barcode: response.data[i].purchase_order_id,
            printed_id: response.data[i].printed_id,
          };
// END OF THE MANIPULATION 

          let payload = {
            id: dataId,
            data: data,
          };
          commit("addData", payload);

在突變中

addData(state, payload) {
    Vue.set(state.data, payload.id, payload.data);
  },

Answer 1

Vue 的反應性系統無法檢測對象屬性添加，請參閱Reactivity in Depth 。

在你的突變中，改變這個

state.data[payload.id] = payload.data;

對此：

Vue.set(state.data, payload.id, payload.data);

Answer 2

JS 反應性對於非原始類型（對象和數組，進一步閱讀的對象）有點奇怪。 想象一個物體是一輛帶有彩色窗戶的公共汽車。 如果乘客（數組中的項目或對象中的鍵/值）或乘客進出公共汽車，而您從街上看它，您不會知道發生了什么變化，公共汽車仍然看起來相同的。 這基本上就是它的工作原理，並且您有 2 個對象反應性選項。

您可以：

a) 替換整個對象

b) 在 Vue 的情況下，使用 Vue.set（用於實際對象，而不用於數組）

選項 a) 如下所示：

// for objects
const addObjectProperty = (state, property) => {
  state.object = {...state.object, property)
}
// for arrays
const addArrayItem = (state, item) => {
  state.array = [...state.array, item]
}

這樣做的目的是使用對象字面量語法（{ } 或 [ ]）動態創建一個新對象。 因此，Vue 正在查看您的 state.object，並看到它被一個全新的對象替換並做出相應的反應。

選項 b) 如下所示：

const addObjectProperty = (state, property) => {
  // Vue.set params: object, key, value 
  Vue.set(state.object, state.object[property], property)
}

至於數組，只需使用數組方法，不要手動更改arr[x] = 10之類的值，因為這會導致同樣的問題。

編輯：如果您有一個嵌套對象作為狀態屬性，您仍然需要替換頂級對象。

state: {
  this: {},
  is: {},
  what: {},
  you: {},
  need: {},
  to: {},
  change: {},
  not: {
    this: {}
  }
}
}

如果您有很多嵌套狀態，最簡單的方法是使用vuex 模塊