Pinia Vue3：在代理上“设置”：当我尝试更改状态时陷入陷阱

Question

当我尝试修改路由器中的商店时，出现以下错误：

“类型错误：代理上的“设置”：属性“transitionName ”的陷阱返回错误”

商店过渡：

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