vue vuex: display an updateable state

Question

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

@EDG956 yeah sorry about that, I made an update and also checking your reference — yaron shamul
– yaron shamul, Commented Dec 21, 2021 at 9:13
I've tried this line but nothing was happend: <h1 :key="this.$store.state.data">hello {{ this.$store.state.data }}</h1> — yaron shamul
– yaron shamul, Commented Dec 21, 2021 at 9:15
@yaronshamul Add computed property in your component and return this data - this.$store.getters.getData and use the computed property in template — H_H
– H_H, Commented Dec 21, 2021 at 10:31

RenaudC5 · Accepted Answer · 2021-12-21 12:53:49Z

2

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

edited Dec 21, 2021 at 12:53

answered Dec 21, 2021 at 10:31

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yaron shamul Over a year ago

can you please take a look on this link

yaron shamul Over a year ago

ok I removed one of these mapGetters wrapers and it doesn't give me an error but still doesn't work as wanted: see this pastebin

RenaudC5 Over a year ago

Have a look a this code pen and tell me if it answer your question about how to connect with the store

yaron shamul Over a year ago

can you please add some change so it will feat vue version 3.x?

RenaudC5 Over a year ago

Here is the app using version 3.0.0 : link

|

Collectives™ on Stack Overflow

vue vuex: display an updateable state

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related