Here is my post.js located in src > store > post.js:
import Vuex from 'vuex'
import Vue from 'vue'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
testState: 'Hello',
TV: 0,
},
getters: {
},
mutations: {
},
actions: {
}
})
This is my index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import post from './post'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
post
}
})
Finally, I attempted to access the state in a component.vue:
<template>
<div id="app">
<h3>{{ testState }} {{ TV }}</h3>
</div>
</template>
<script>
import store from './store'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
name: 'App',
data(){
return {
}
},
computed: {
...mapState(['testState'])
}
}
</script>
However, an error keeps popping up on the console:
Property or method "testState" is not defined on the instance but referenced during render.
Upon inspecting the Vuex state in Chrome's devtools, I can clearly see that testState: 'hello' is present, verifying its existence.
Any advice or tips? Appreciate it!