Vue3+Pinia路由中修改状态报错：'set' on proxy陷阱返回假值

在Vue Router的beforeEach钩子中调用Pinia store的action修改状态时，出现错误：TypeError: 'set' on proxy: trap returned falsish for property 'transitionName'

问题原因 #

核心问题是你的transition store里定义了一个和state属性同名的getter transitionName。Pinia中，getter会覆盖同名的state属性，而getter默认是只读的（没有设置setter），当action尝试修改this.transitionName时，实际是在尝试修改只读的getter，导致Proxy拦截set操作返回false，触发错误。

解决方案 #

方案1：重命名getter，避免和state属性冲突

把getter的名称改成和state不同的名字，比如getTransitionName：

import { defineStore } from "pinia";

interface TransitionState {
  transitionName: string;
}

export const useTransition = defineStore("transition", {
  state: (): TransitionState => ({
    transitionName: "slide-right",
  }),
  actions: {
    changeTransitionName(transitionName: string) {
      this.transitionName = transitionName;
    },
  },
  getters: {
    // 重命名getter，解决同名冲突
    getTransitionName: (state: TransitionState) => state.transitionName,
  },
});

方案2：删除多余的getter

如果这个getter只是简单返回state属性，没有额外处理逻辑，完全可以直接通过store实例访问transitionStore.transitionName，没必要保留getter：

import { defineStore } from "pinia";

interface TransitionState {
  transitionName: string;
}

export const useTransition = defineStore("transition", {
  state: (): TransitionState => ({
    transitionName: "slide-right",
  }),
  actions: {
    changeTransitionName(transitionName: string) {
      this.transitionName = transitionName;
    },
  },
  // 删除无意义的getter
});

补充说明 #

在Pinia中，当getter与state属性同名时，getter会被优先访问，且默认是只读的。如果需要通过getter修改state，必须给getter设置setter，但这种场景下完全没必要——直接修改state或者通过action修改更合理。

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