CODEWITHSUNDEEP
javascriptvue.jsvuejs3
yaron shamul
yaron shamul

Reputation: 37

vue vuex: display an updateable state

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

Upvotes: 1

Views: 103

Answers (1)

RenaudC5
RenaudC5

Reputation: 3829

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

Upvotes: 2

Related Questions