I've been experimenting with Vue 3's Composition API by creating a small in-app message console, but I'm having trouble pinpointing the error in my code. When rendering this component, the state is being accessed during render (in the loop), even though I believe I defined it correctly in the object returned by the setup() function:
<template>
<div>
<p class="message" v-for="message in state.messages" v-bind:key="message.id">{{message.text}}</p>
</div>
</template>
<script lang="ts" >
import { Options, Vue } from 'vue-class-component';
import { consoleStore } from "@/store/ConsoleStore"
@Options({})
export default class Console extends Vue {
setup() {
console.log("setup entered")
consoleStore.record("This is a test.")
let state = consoleStore.getState()
return {
state
}
}
}
</script>
In addition, the line
console.log("setup entered")consoleStore, I have implemented a simple Vue 3 store class based on the concept outlined in this article, where it should be a readonly(reactive(stuff)):
import { reactive, readonly } from 'vue';
export abstract class AbstractStore<T extends Object> {
protected state: T;
constructor() {
let data = this.data();
this.setup(data);
this.state = reactive(data) as T;
}
protected abstract data(): T
protected setup(data: T): void { }
public getState(): T {
return readonly(this.state) as T
}
}