CODEWITHSUNDEEP
typescriptvue.jsvuejs3vue-composition-api
Silver Quettier
Silver Quettier

Reputation: 2050

Vue 3 Composition API - Property returned by setup() "accessed during render but is not defined on instance."

I'm toying around with Vue 3's Composition API creating a small in-app message console, and I don't get where is the error in my code. Rendering this component, state is accessed during render (in the loop) but I think I correctly defined it in the object returned by setup():

<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>

What's more, the console.log("setup entered") line does not output anything to the dev console. As if the setup block is never entered. For consoleStore I'm implementing the simple Vue 3 store class proposed in this article, so 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
    }
}

Upvotes: 2

Views: 2031

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

I think you're missing to import setup inside the class component :

import { Options, Vue,setup  } from 'vue-class-component';
import { consoleStore } from "@/store/ConsoleStore"

function useState () {
 console.log("setup entered")
      consoleStore.record("This is a test.")
      let state = consoleStore.getState()
      return {
        state
      }
}
@Options({})
export default class Console extends Vue {
 state= setup(() =>useState()) 
}
</script>

Upvotes: 1

Related Questions