Vue3 Pinia报错：'set' on proxy: trap对'app'返回假值，如何修复？

问题根源 #

你在store的getters里定义了一个和state属性同名的app getter。Pinia的getter是基于Proxy实现的只读属性，当你在action里执行this.app = xxx时，会被代理拦截成试图修改这个只读getter，而getter没有对应的setter逻辑，因此抛出该错误。

解决方法 #

直接移除getters中和state同名的app getter——Pinia会自动把state的所有属性暴露在store实例上，你完全可以直接通过this.app访问state里的app，不需要额外定义同名getter。

修改后的完整store代码：

export const useNewAppStore = defineStore('app-new',{
    /**
     * @return {Object}
     * @property {Application|null} app
     */
    state: () => {
        return {
            app: null
        }
    },
    getters: {
        appExists(state) {
            return !!state.app;
        }
    },
    actions: {
        /**
         *
         * @param {Application} app
         */
        saveApp(app) {
            console.log('this.app:');
            console.log(this.app);
            if (!this.app) {
                this.app = createNewApp(app);
            } else {
                copyApp(this.app, app);
            }
        },
        /**
         * Set movingApp to null
         */
        clearApp() {
            this.app = null;
        },
    },
    persist: true,
})

验证说明 #

修改后，action里的this.app会直接指向state中的app属性，赋值操作会正常触发state的更新逻辑，不会再触发getter的只读拦截，错误也就消失了。

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