[英]How to run a function within a vue3 component when state within a Pinia store changes
[英]Pinia Vue3 : 'set' on proxy: trap when i try to change my state
当我尝试修改路由器中的商店时出现此错误:
“ 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
你有相同的名字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,
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.