how to display the value from store in vuex

Question

I stored my data in Vuex store. Here how it looks like:

And basically, I want to show first_name in the view. So I returned the data like this:

data () {
        return {
            first_name: this.$store.state.user.attributes.first_name,
        }
    },

Ans easily want to display it inside of the div:

<div>{{first_name}}</div>

But I am getting vue.esm.js:1906 TypeError: Cannot read properties of undefined (reading 'first_name')

Answer 1

You need a computed property for that.

So instead of having the variable first_name in your data, set it as a computed property as follows:

computed: { first_name() { return this.$store.state.user.attributes.first_name } }