Pinia计算上月/下月时selectedMonth被意外修改的问题排查

核心问题：Date对象的引用特性与Getter误用 #

1. Date是引用类型：你代码里const myDate = state.selectedMonth只是把selectedMonth的引用赋值给新变量，两者指向同一个Date实例。而setMonth()方法是原地修改Date对象本身的，这就导致你操作副本时，原selectedMonth也被同步修改了。
2. Getter不该修改State：Pinia的Getter是用来计算派生状态的纯函数，你直接在Getter里给state.lastMonth、state.nextMonth赋值，既不符合设计规范，还会引发不必要的状态变更。

修正后的代码 #

import { defineStore } from "pinia";
import type { agendaState } from "@/myApp/interfaces";

export const useAgenda = defineStore("useAgenda", {
  state: (): agendaState => ({
    selectedMonth: new Date(),
    // 移除State里的lastMonth和nextMonth，它们属于派生状态，无需存储
  }),
  getters: {
    lastMonthCalc: (state): Date => {
      // 先复制原Date对象，彻底隔离对原selectedMonth的影响
      const lastMonth = new Date(state.selectedMonth);
      lastMonth.setMonth(lastMonth.getMonth() - 1);
      return lastMonth;
    },
    nextMonthCalc: (state): Date => {
      const nextMonth = new Date(state.selectedMonth);
      nextMonth.setMonth(nextMonth.getMonth() + 1);
      return nextMonth;
    },
  },
});

补充场景说明 #

如果需要手动切换选中月份（比如点击上月/下月按钮），应该用Action处理而非Getter，示例如下：

// 在Store中添加Actions
actions: {
  switchToLastMonth() {
    const targetDate = new Date(this.selectedMonth);
    targetDate.setMonth(targetDate.getMonth() - 1);
    this.selectedMonth = targetDate;
  },
  switchToNextMonth() {
    const targetDate = new Date(this.selectedMonth);
    targetDate.setMonth(targetDate.getMonth() + 1);
    this.selectedMonth = targetDate;
  },
}

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