I have latest Vue project from cli. Just playing around with vuex and the store.
Default project has this initialization.
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
The store looks like this:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
stateName: 'STORE-NAME',
},
mutations: {
},
actions: {
},
});
My SFC looks like this:
<template>
<div class="about">
<h1>This is the Probate page</h1>
<p>State Name: {{ localName }}</p>
</div>
</template>
<script lang="ts">
export default {
data(){
return {
localName: 'COMPONENT-NAME',
};
},
created(){
this.localName = this.$store.state.stateName;
},
};
</script>
The error I'm getting is this when running 'npm run serve':
ERROR in /Users/*/Documents/projects/legalcove-single-page-app/src/views/Probate.vue
27:14 Property 'localName' does not exist on type '{ data(): { localName: string; }; created(): void; }'.
26 |
> 27 | this.localName = this.$store.state.stateName;
| ^
28 |
29 | },
30 | };
Version: typescript ERROR in /Users/*/Documents/projects/lc-single-page-app/src/views/Probate.vue3.1.1
, tslint 5.11.027:31
Property '$store' does not exist on type '{ data(): { localName: string; }; created(): void; }'.
Time: 3011 ms
26 |
> 27 | this.localName = this.$store.state.stateName;
| ^
28 |
29 | },
But while running the app, I don't get any errors in the browser and it works as I would expect it to. I get stateName value displayed on my screen.
