Pinia Vue3：在代理上“設置”：當我嘗試更改我的 state 時陷入陷阱

Question

當我嘗試修改路由器中的商店時出現此錯誤：

“ TypeError：代理上的‘set’：陷阱為屬性‘transitionName’返回了 falsish ”

商店過渡：

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

路由器：

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;

如果有人可以幫助我，請 <3

Answer 1

你有相同的名字state和getter ： transitionName 。

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

重命名其中任何一個，使它們具有不同的名稱。

例子：

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