Feeling a bit lost here...
I'm utilizing Vuex in my project and have a module called common stored in the file common.js:
const initState = {
fruits: []
}
export default {
state: initState,
mutations: {
SET_FRUITS(state, fruits) {
console.log(fruits);
state.fruits = fruits;
}
},
actions: {
async getFruits({ commit }) {
const fruits =[
{
text: 'Apple',
value: {id: 1, val: 'apple'},
},
{
text: 'Banana',
value: {id: 2, val: 'banana'},
},
{
text: 'Pear',
value: {id: 3, val: 'pear'},
},
{
text: 'Plum',
value: {id: 4, val: 'plum'},
}
];
commit('SET_FRUITS', fruits);
}
}
}
Now, let's take a look at my store defined in index.js:
import Vue from 'vue';
import Vuex from 'vuex';
import common from './modules/common';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
common,
}
})
I've attempted to access state.fruits within App.vue:
<template>
<div>
{{ this.$store.state.fruits }}
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
async mounted() {
await this.$store.dispatch('getFruits');
console.log(this.$store.state.fruits);
},
}
</script>
The console.log output from mutations displays the array of fruits correctly. However, the one from mounted() function in App.vue returns undefined. What could be causing this issue? What am I overlooking?