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

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

• javascript
• vue.js
• vuejs3
• pinia

• getters are suppose to be used when you have some logic/filters to be checked on original state. They act as puted value on store state. pinia getters. Also check issue – Ankit.Z Commented Oct 6, 2022 at 5:53

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