Vuejs3 pinia error: 'set' on proxy: trap returned falsish for property

Question

I have the following store defined:

export const useNewAppStore = defineStore('app-new',{
    /**
     * @return {Object}
     * @property {Application|null} app
     */
    state: () => {
        return {
            app: null
        }
    },
    getters: {
        app(state) {
            return state.app;
        },

        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,
})

Whenever I use newAppStore.saveApp(this.application);

I get an error "caught TypeError: 'set' on proxy: trap returned falsish for property 'app'".

How can I fix this problem?

Answer 1

This problem raised because of using the same name 'app' as getter and state property (this.app). As soon as I renamed state property to this._app, the problem is gone.

P.S.: removing getter 'app' was a more elegant solution to the problem (in my case). Getters are like computed, they are only useful if they return a modified version of the state.