Encountered an error with return this.$store.state.counter:
The property '$store' does not exist on the type 'CreateComponentPublicInstance<{}, {}, {}, { counter(): any; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, ... 7 more ..., {}>'.Vetur(2339)
The property '$store' does not exist on the type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'.Vetur(2339)
This Vue project is freshly created using the CLI configuration:
- Vue version 3.x (Preview)
- No usage of class-style component syntax
- Yes to Babel and TypeScript integration
- ESLint + Prettier are set up as linter and formatter
- Linting happens on save
- Configuration files are in separate dedicated files
All files are the default ones generated through Vue CLI with the default project structure.
index.ts file:
import { createStore } from "vuex";
export default createStore({
state: {
counter: 8,
},
mutations: {},
actions: {},
modules: {},
});
App.vue file:
<template>
<h2>{{ counter }}</h2>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {},
computed: {
counter() {
return this.$store.state.counter;
},
},
});
</script>
main.ts file:
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
createApp(App).use(store).mount("#app");
I'm currently learning Vue and trying to access a Vuex store state property for a simple counter example.
I can retrieve the counter state directly in the template using interpolation like {{ $store.state.counter }}, but I face issues when trying to utilize a computed property that returns a value as I'm unable to access the $store object with the keyword this.
return this.$store.state.counter doesn't seem to work
My development environment consists of:
- VSCode, latest version
- NPM and Vue CLI
- Vetur
- ESLint
- Prettier
I've attempted similar examples in other project setups, such as those without TypeScript or utilizing Class-Style component syntax. However, Vetur encounters issues in the former case (uncertain if it would cause an error), and while it works in the latter case, I find the syntax unfamiliar and overwhelming to learn due to my lack of experience.
Edit: There are related questions, but none specifically address a fresh Vue CLI project.