javascript - 改变计算属性中的数据也更改了 vuex 存储中的数据 : why? 感谢任何帮助

Question

对于我当前的项目，我正在开发一个商店页面。我将每个订单的数据发送到我的 Laravel 后端，以便对其进行处理。该数据的一部分是一个数组，其中包含所有订购的产品。我在此数组上使用 JSON.stringify() 以避免 Laravel 后端出现错误。

我的问题是，当我在计算属性中对数组进行字符串化时，由于某种原因，这也更改了我的 Vuex 存储中的数据。这显然会导致相当多的错误。这是正常行为，还是我做错了什么？我怎样才能避免这种情况发生？提前致谢!

您可以在下面的代码片段中看到我的组件的代码。

import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      order: "getOrder",
      countries: "getCountries"
    }),
    orderData() {
      let myOrder = this.order;
      if (myOrder.products) {
        myOrder.products = JSON.stringify(myOrder.products);
      }
      return myOrder;
    },
    country() {
      return this.countries.find(
        country => country.iso_3166_2 === this.order.country
      ).name;
    }
  },
  methods: {
    placeOrder() {
      console.log(this.orderData);
    }
  }
};
</script>

Answer 1

您正在将 this.order 的引用分配给 myOrder，随后您在其中的所有修改都会影响 this.order(因此您正在变异)。

在这种情况下，由于您只想修改products，因此可以浅复制this.order，如下所示:

let myOrder = { ...this.order };

然后，第一级的所有属性都会有不同的指针，因此您可以更改它们而不必担心突变。