Why does Vuex work “randomly” and how to properly get state from it?

Question

Vue.js

There is storage :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userData: ''
  },
  mutations: {
    setData: function(state, data) {
      state.userData = data
    }
  },
  actions: {
  },
  modules: {
  }
})

There is a component that gets this very userData from the storage:

export default {
        name: 'Profile',
        data() {
            return {
                userData: this.$store.state.userData
            }
        },
    }

The problem is that this works completely randomly:
It may or may not show userData.
Basically, a component renders either an empty string or undefined.

I don't understand what's wrong - how to solve this problem?

Answer 1

You need to create getters like this:

getters: {
        userData: state => {
            return state.UserData;
        }

And then get the object from the storage like this:
this.$store.getter.userData

Answer 2

Asynchrony!!!