I am currently developing a Nuxt 3 module that includes a basic button component. The button is designed to toggle a boolean value when clicked, with the underlying logic stored in a separate file using pinia as a store.
Here is an example of the store code:
import { defineStore } from "pinia"
export const getLogic = defineStore('logic', {
state: () => {
return{
status: false,
}
},
actions: {
flip() {
this.status = !this.status
},
},
getters: {
getStatus() { return this.status }
}
})
And here is the snippet for the button component:
<template>
<button onClick="logic.flip()">
<slot />
</button>
</template>
<script lang="ts">
import { getLogic } from "../../stores/logic"
export default {
setup() {
const logic = getLogic()
return { logic }
}
}
</script>
I am testing the functionality of this module within the "playground environment" by implementing the button component like so:
<template>
<Button >
Button
</Button>
</template>
Upon clicking on the button component, I encountered an error message in the browser console:
Uncaught InternalError: too much recursion
callWithAsyncErrorHandling runtime-core.esm-bundler.js:162
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
...
This issue perplexes me, as there is no apparent recursion involved in my logic. How can I address or resolve this problem?