Vue分页数据存储与更新

1.方案一 handleselectionPageChange

拓展handleselectionpagechange

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const handleSelectionChange = (selection) => {
  console.log("currentPage.value", currentPage.value);
  console.log("selection", selection, typeof selection);
  let _arr = selection.map(item => {
    console.log("item.value", item.value);
    return toRaw(item)
  })
  console.log('arr', _arr);
  let _current_page_data = myArray.map(item => item.page === currentPage.value)
  let tmp = {
    page: currentPage.value,
    row: _arr
  }//临时变量
  if (!_current_page_data.length) {

    myArray.push(tmp)
  } else {
    // 已存在
    let newArr = myArray.filter(item => item.page !== currentPage.value)
    newArr.push(tmp)
    myArray = newArr
  }
  console.log("selectedDataAddPage", myArray);
};

2.方案二 Watch监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 当 currentPage 或 pageSize 发生变化时，重新获取数据
watch(currentPage, (newValue, oldValue) => {
    let existingDataIndex = myArray.findIndex(item => item.page === selectedData.page);
    console.log("selectedDataNew",selectedData.value);
    if (existingDataIndex !== -1) {
      // 如果存在相同 page 的数据，则更新该数据
      myArray[existingDataIndex].row = selectedData.value;
      console.log("Update myArray",myArray);
  } else {
      // 如果不存在相同 page 的数据，则添加新的数据
      myArray.push({
      page:oldValue,
      row:selectedData.value,
    })
  console.log("Add myArray",myArray);
  }
  console.log('selectedData',selectedData.value);
  console.log("newValue)",newValue);
  console.log("oldValue",oldValue);
});

3.方案三 VueX (暂时未使用)–封装storage替代

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它通过提供一个全局的、可预测的状态管理机制，使得在Vue.js应用程序中管理和共享数据变得更加简单和高效。

Vuex的基本原理是将应用程序的状态（数据）集中存储在一个单一的地方，称为“store”。这个store类似于一个容器，它包含了应用程序的所有组件共享的状态。在Vuex中，store的状态只能通过特定的方式来进行修改，以确保状态的变更是可追踪和可控制的。

Vuex提供了一些核心概念：

  1. State（状态）：存储应用程序的数据，即所有组件共享的数据。
  2. Mutation（突变）：用于修改state中的数据。Mutation是同步操作，用于保证状态的变更是可追踪的。
  3. Action（动作）：用于处理异步操作，可以包含任意的异步逻辑。Action通过调用Mutation来修改state中的数据。
  4. Getter（获取器）：用于从state中派生出一些衍生数据，类似于组件中的计算属性。

通过Vuex的这些机制，我们可以实现在组件之间共享数据、实时响应数据变化、管理异步操作以及简化组件间的通信。Vuex的设计目标是使得应用程序的状态管理更加可维护、可追踪和可扩展，尤其适用于大型复杂应用程序的开发。