Recently, I've been exploring the new functionality outlined in the documentation.
However, I'm encountering an error that states :
Property or method "$fetchState" is not defined on the instance but referenced during render.
Despite clearly defining the fetch() method within my component and successfully retrieving some data from it.
<template>
<div v-if="$fetchState">
<p v-if="$fetchState.pending">Fetching posts...</p>
<p v-else-if="$fetchState.error">Error while fetching posts</p>
<div v-else>
<div v-if="content.content1" v-html="content.content1" />
<div v-if="content.content2" v-html="content.content2" />
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
async fetch({ store, error }) {
try {
await store.dispatch('home/fetchContent')
} catch (e) {
error({
statusCode: 503,
message: 'Unable to fetch'
})
}
},
computed: mapState({
content: (state) => state.home.content
})
}
</script>
Has anyone else come across this issue before?