Почему Vuex работает «рандомно» и как правильно достать из него state?

Question

[alaskafx]

Есть хранилище:

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: {
  }
})

Есть компонент, который достаёт этот самый userData из хранилища:

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

Проблема в том, что это работает совершенно рандомно:
Он может показывать userData, а может не показывать.
В основном, в компоненте отображается либо пустая строка, либо undefined.

Не понимаю в чём дело - как решить эту проблему?

Comments

[Михаил]

в computed перетащите

[alaskafx]

Михаил, еклмн, спасибо

Answer 1

[PavelPlot99]

Нужно создать getters так:

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

А потом получать объект из хранилища вот так:

this.$store.getter.userData

Comments

[Сергей Левченко]

Геттеры предназначены не для этого. И проблему ТС это никак не решит.

Answer 2

[Сергей Левченко]

Асинхронность!!!