Vue Pinia：切换 function 只切换一次而不返回

Question

我有一个 Pinia useStore，其中有一个 boolean 变量和一个开关 function：

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()
}