Vue Pinia Store如何获取初始状态以检测对象变更？

方案1：抽离初始状态常量（推荐） #

把myobj的初始值单独定义为常量，既可以复用在state初始化，也能直接用于getter中的对比，完全不需要在组件中做深拷贝操作。

import { defineStore } from "pinia";

// 抽离初始状态，统一维护
const INITIAL_MYOBJ = {
  foo: 0,
  bar: 2000,
  too: 1000,
};

export const useSearchStore = defineStore("store", {
  state: () => {
    return {
      // 浅拷贝初始值到state（基本类型足够，嵌套对象用深拷贝）
      myobj: { ...INITIAL_MYOBJ },
    };
  },
  getters: {
    // 返回仅包含变更项的对象
    changed() {
      return Object.fromEntries(
        Object.entries(this.myobj).filter(([key, value]) => value !== INITIAL_MYOBJ[key])
      );
    },
    // 可选：快速判断是否存在变更
    hasChanged() {
      return Object.keys(this.myobj).some(key => this.myobj[key] !== INITIAL_MYOBJ[key]);
    }
  },
  actions: {
    // 可选：一键重置到初始状态
    resetMyobj() {
      this.myobj = { ...INITIAL_MYOBJ };
    }
  },
});

嵌套对象场景的适配 #

如果myobj包含嵌套对象，浅拷贝会导致引用共享，需要改用深拷贝初始化state，同时getter中要递归对比属性：

import { defineStore } from "pinia";

const INITIAL_MYOBJ = {
  foo: 0,
  nested: { a: 1, b: 2 }
};

export const useSearchStore = defineStore("store", {
  state: () => {
    return {
      // JSON序列化实现深拷贝（简单场景够用，复杂场景可使用lodash.cloneDeep）
      myobj: JSON.parse(JSON.stringify(INITIAL_MYOBJ)),
    };
  },
  getters: {
    changed() {
      const diff = {};
      Object.entries(this.myobj).forEach(([key, value]) => {
        if (typeof value === 'object' && value !== null) {
          // 递归处理嵌套对象的差异
          const nestedDiff = Object.fromEntries(
            Object.entries(value).filter(([k, v]) => v !== INITIAL_MYOBJ[key][k])
          );
          if (Object.keys(nestedDiff).length > 0) {
            diff[key] = nestedDiff;
          }
        } else {
          if (value !== INITIAL_MYOBJ[key]) {
            diff[key] = value;
          }
        }
      });
      return diff;
    }
  },
});

方案优势 #

• 对比逻辑完全封装在Store内部，组件无需额外处理，符合Pinia的状态管理原则
• 初始状态单一数据源，修改时只需维护一处，降低维护成本
• 避免了组件钩子中深拷贝带来的额外性能开销（尤其是频繁更新的场景）

内容的提问来源于stack exchange，提问作者Fred