vue2赋值引用问题

Question

pickerTableData(val) {
      let rowData = [...this.rowData];
      let tableData = rowData.filter((rowData) => {
        if (
          this.valueName != "" &&
          this.startTime != "" &&
          this.endTime != ""
        ) {
          // 三值
          return (
            rowData.goodsName == this.valueName &&
            rowData.saleTime >= this.startTime &&
            rowData.saleTime <= this.endTime
          );
        } else if (
          this.valueName != "" &&
          this.startTime == "" &&
          this.endTime == ""
        ) {
          // 名字
          return rowData.goodsName == val;
        }
        return (
          // 时间
          rowData.saleTime >= this.startTime && rowData.saleTime <= this.endTime
        );
      });
      tableData.forEach((item) => {
        const salesVolume = item.unitPrice * item.saleCount;
        const profit = item.saleCount * (item.unitPrice - item.cost);
        const cost = item.cost * item.saleCount;
        item['salesVolume'] = salesVolume;
        item['profit'] = profit;
        item['cost'] = cost;
        //   ;
      });
      this.tableData = tableData;
      this.setsaleEcharts();
    },

为什么无论我怎么操作都会修改this.rowData的值，this.rowData是由vuex中的数据得来，是一个计算属性。但我这没有直接修改this.rowData的值，this.rowData是一个对象数组，出问题的是对象中的cost属性，第二次得到的cost是第一次cost的值。我每执行一次不应该是从最原始的this.rowData中拿数据吗，但我第二次拿的时候item.cost的值是第一次item['cost'] = cost;计算后的值，this.rowData的值已经被修改了！vuex中的原始数据也被修改了！

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题涉及到Vue.js与JavaScript混合编程的一些复杂特性。在Vue中，rowData是一个由 Vuex 状态管理器提供的计算属性，用于动态更新组件的数据。如果你尝试直接修改 rowData，那么 Vue 将会重新渲染整个组件，而不是仅仅改变当前元素。

解决此问题的方法有几种：

1. 使用 Vue 的生命周期钩子：可以使用 computed 属性来定义一个函数，这个函数会在每次 mounted 或者 updated 钩子触发时被调用。例如：

// 在 mounted 生命周期钩子中设置 computed 函数
computed: {
  rowData() {
    return this.$store.state.rowData;
  },
},

1. 使用 Vue 的响应式系统：你可以通过为 rowData 设置一个监听器，在其变化时更新状态。

watch: {
  rowData(newValue, oldValue) {
    console.log('旧值:', oldValue); // 原来的值
    console.log('新值:', newValue); // 新的值
  }
},

1. 使用 Vuex 中的 state 和 mutations：将 rowData 放到 Vuex store 中，并且在相应的状态变更时更新它。

const store = new Vuex.Store({
  state: {
    rowData: []
  },
  mutations: {
    setRowData(state, payload) {
      state.rowData = payload;
    }
  }
});
...
this.$store.commit('setRowData', rowData);

1. 使用 Vue 的代理机制：这是一种更高级的技术，允许你创建一个新的数据结构并将其绑定到 Vue 组件上，而不需要更改原生 Vue 数据结构。

import { reactive } from 'vue';
import { defineStore } from 'pinia';

export default defineStore('my-store', () => {
  const myData = reactive({});

  return {
    get rowData() {
      return myData.data;
    },
    set rowData(value) {
      myData.data = value;
    }
  };
});

1. 使用 Vue 自带的计算属性：如果你知道 rowData 是什么类型的，可以直接获取它的值，无需依赖 Vuex 或其他库。

computed: {
  rowData() {
    return this.$store.state.rowData;
  }
}

以上方法可以根据你的具体需求进行选择和调整。希望这些信息对你有所帮助。