如何在Pinia中创建状态历史数据？解决引用覆盖问题

问题根源 #

JavaScript中数组、对象属于引用类型，直接将原业务数组存入历史数组时，实际存储的是同一个内存引用。后续修改原数组时，历史数组里的对应项会同步变化，导致历史记录被覆盖。

解决方案 #

核心思路是：修改原Pinia状态后，对当前状态做深拷贝，再将拷贝后的快照存入历史存储，彻底切断引用关联。

1. 保留原Pinia Store默认配置

正常维护业务数组状态，仅在修改后触发历史记录存储：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    dataList: [] // 业务数组状态
  }),
  actions: {
    // 向数组添加元素
    pushItem(item) {
      this.dataList.push(item)
      this.saveHistory()
    },
    // 修改数组内元素
    updateItem(index, newData) {
      this.dataList[index] = { ...this.dataList[index], ...newData }
      this.saveHistory()
    },
    // 深拷贝并保存当前状态到历史
    saveHistory() {
      useHistoryStore().addHistory(this.deepClone(this.dataList))
    },
    // 自定义深拷贝方法（处理普通类型、数组、对象）
    deepClone(obj) {
      if (obj === null || typeof obj !== 'object') return obj
      if (obj instanceof Date) return new Date(obj.getTime())
      if (Array.isArray(obj)) return obj.map(item => this.deepClone(item))
      const clonedObj = {}
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          clonedObj[key] = this.deepClone(obj[key])
        }
      }
      return clonedObj
    }
  }
})

2. 实现不可变的历史存储（可选Pinia或普通模块）

这里用Pinia实现，确保历史数组仅支持追加，不允许修改已有项：

import { defineStore } from 'pinia'

export const useHistoryStore = defineStore('history', {
  state: () => ({
    historyList: [] // 仅用于追加的历史快照数组
  }),
  actions: {
    // 仅提供追加方法，禁止直接修改historyList
    addHistory(stateSnapshot) {
      this.historyList.push(stateSnapshot)
    }
  },
  getters: {
    getAllHistory: (state) => state.historyList
  }
})

替代方案（复杂类型场景） #

如果业务数组包含Date、函数等JSON序列化无法处理的类型，可以使用lodash.cloneDeep替代自定义深拷贝：

import cloneDeep from 'lodash.clonedeep'

// 在useMainStore的saveHistory中替换为：
saveHistory() {
  useHistoryStore().addHistory(cloneDeep(this.dataList))
}

关键注意事项 #

• 历史存储的historyList仅通过addHistory方法追加，禁止直接修改数组内的已有元素，保证不可变性
• 每次修改原业务状态后，必须立即保存深拷贝后的快照，避免遗漏历史节点
• 如果不需要完整状态快照，也可以只存储变更操作（如新增的元素、修改的索引和数据），但需要额外实现历史回放逻辑，复杂度更高

内容的提问来源于stack exchange，提问作者Mehdi Shah abbasian