Pinia Vue3 : 'set' on proxy: trap when i try to change my state

Question

When I try to modify my store in the router I have this error:

" TypeError: 'set' on proxy: trap returned falsish for property 'transitionName '"

store transition :

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: {
    transitionName: (state: TransitionState) => state.transitionName,
  },
});

router :

import Home from "@/views/Home.vue";
import { createRouter, createWebHistory } from "vue-router";
import { useTransition }  from "@/stores/transition";

const router = createRouter({}); 

router.beforeEach((to, from, next) => {
  const toDepth = to.path.split('/').length;
  const fromDepth = from.path.split('/').length;
  const transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
  const transitionStore = useTransition();
  
  transitionStore.changeTransitionName(transitionName) // **this line cause the problem**

  next();
});
enter code here

export default router;

If anyone can help me pls <3

Answer 1

You have the same names state and getter : transitionName .

  state: (): TransitionState => ({
    transitionName: "slide-right",
  }),
  ...
  getters: {
    transitionName: (state: TransitionState) => state.transitionName,
  },

Rename any of them so they have different names.

Example:

 state: (): TransitionState => ({
   _transitionName: "slide-right",
 }),
 actions: {
   changeTransitionName(transitionName: string) {
    this._transitionName = transitionName;
   },
 },
 getters: {
   transitionName: (state: TransitionState) => state._transitionName,
 },