Vue Pinia: Toggle函数只能切换一次，不能返回

Question

我得到了一个Pinia useStore，其中我得到了一个布尔变量和一个切换函数:

export const useStore = defineStore('storeID', {
state: () => ({
eineVariable: true
}),
getters: {
getEineVariable(state) {
return state.eineVariable
}
},
actions: {
toggleFunktion() {
this.eineVariable = !this.eineVariable
console.log(this.eineVariable)
}
}
})

如果我用clickevent创建这个div来切换div的颜色，它只记录我从true到false的一个切换，而不是进一步。

import {useStore} from "../store/index.js"
const store = useStore()
const isActive = computed(() => {
return store.getEineVariable
})
const toggleBox = computed(() => {
return store.toggleFunktion()
})

<div class="piniaBox" :class="{ 'active': isActive}" @click="toggleBox"></div>

我真的不明白我的错误。你们能帮帮我吗?

Answer 1

计算函数应该返回一个值，在它内部做副作用是错误的。

应:

const toggleBox = () => {
store.toggleFunktion()
}