while trying to get an updateable data in a tag I am only receiving the initial data, I can see the data updating in the debugger. and after changeing the state I can not display the new data:
I'm doing all the update thing in another component I only need to display the updated data from store
component.vue
<template lang="js">
<div>
<h1>hello {{ store.getters.myData}}</h1>
<a><router-link to="/register">Go to Sign up</router-link></a>
<a><router-link to="/">Go to Home</router-link></a>
<router-view></router-view>
</div>
</template>
<script>
import store from "../store";
export default {
};
</script>
store.js
import Vuex from 'vuex'
const state = { data: 'initial data'}
const getters = { myData(state){ return state.data; } }
const mutations = { UPDATE_DATA(state, data){ state.data = data; } }
const actions = { setData(data) { store.commit("UPDATE_DATA", data);} }
const store = new Vuex.Store({
state,
actions,
mutations,
getters
})
export default store
You should use vuex mapGetters function to display your data.
In your component file import your getter inside the computed property
Import mapGetters with import {mapGetters} from "vuex";
computed: {
...mapGetters({
myData: 'store/myData'
})
}
Your data should be updated any times your store is updated