vue.js 使用合成API更新数组

aelbi1ox  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(128)

我正在使用Vue,并安装了Pinia Store。

export default {
  setup() {
    let rows: Row[] = store.history.rows;
  }
}

这样做很好,但稍后我想覆盖数组并过滤它:

const filterArray = () => {
      rows=store.history.rows;
       for (let index = 0; index < rows.length; index++){
        if (rows[index].department !== departmentModel.value) {
           rows.splice(index, 1);
        }
      }
    };

filterArray方法也从store.history.rows数组中删除了对象,所以两个数组很快就会为空。我想归档的是,每次调用filterArray时,rows数组都会被store.history.row s数组(包含所有对象)覆盖,然后rows数组会根据if语句进行过滤。
我做错了什么?

bmp9r5qi

bmp9r5qi1#

当你设置rows = store.history.rows时,它并没有复制数组,它只是像指针一样引用同一个数组。
可以通过在继续修改数组之前复制数组来避免这种情况

rows = [...store.history.rows];

或者使用函数约定,恕我直言,这是首选的方式。

const filterArray = () => {
  rows = store.history.rows.filter(item => item.department === departmentModel.value)
}

这将创建与给定departmentModel.value匹配的项的新数组。

相关问题