Vuex getter возвращает неопределенное значение

Question

У меня есть приложение vue, использующее vex для хранения данных, охватывающих весь сайт. Я получаю информацию о пользователе и помещаю ее в состояние метода жизненного цикла перед созданием, например, так:

const app = new Vue({
    el: '#app',
    store,
    beforeCreate(){
        store.dispatch('currentUser');
    }
});

В моем пользовательском модуле яесть геттер, который получает имя пользователя, как показано ниже:

const getters = {
    getName(state){
        return state.user.name;
    }
};

В моих компонентах я пытаюсь получить доступ к геттеру, чтобы отобразить имя пользователя в компоненте.Когда я смотрю на инструменты разработки Vue Chrome, геттер не является неопределенным, но когда я консоль регистрирую результаты геттера примерно так, он говорит, что неопределен.

mounted(){
    console.log(store.getters.getName);
},

Кажется, что компонент загружается до загрузки состояния,Я получаю информацию о пользователе, используя axios.Я действительно запутался в том, как решить эту проблему, так как не могу вызвать действие, чтобы получить пользовательские данные раньше, чем я знаю.

Если в моем методе получения я использую:

state.user

Я получаю это:

{ "id": 1, "name": "Test" }

Но когда я пытаюсь получить имя, я получаю неопределенное

Вот магазин:

import axios from "axios/index";

const state = {
    user: {},
};

const mutations = {
    FETCH_USER(state,user){
        state.user = user;
    },
    UPDATE_AVATAR(state,avatar){
        state.user.avatar = avatar;
    }
};

const getters = {
    getName(state){
      return state.user.name
    },
    avatar(state){
        return state.user.avatar;
    },
    userSocialNetworks(state){
        //return state.user.social_networks
    },
    schoolName(state){
        return state.user.school
    },
    schoolAbout(state){
        return state.user.school.about
    },
    schoolAddress(state){
        return state.user.school.address
    }
};

const actions = {
    currentUser: ({commit}) => {
        axios.get('/api/user').then(response => {
            commit('FETCH_USER', response.data);
        });

    }
}

export default {
    state,
    getters,
    actions,
    mutations

}


 {"user":{"user":{"name":"Test","email":"test@test.edu","avatar":"http://www.gravatar.com/avatar/xxxx=300","city":null,"state":null,"zip":null,"address":null,"lat":null,"long":null,"role":"school","school":{"id":1,"about":null,"header":null,"name":"Test","user_id":1,"created_at":"2018-06-06 19:48:16","updated_at":"2018-06-06 19:48:16"},"following":[],"followers":[],"social_networks":[{"id":4,"user_id":1,"social_network_id":1,"network_url":"test.com/k","created_at":"2018-06-06 23:11:09","updated_at":"2018-06-06 23:15:19"},{"id":5,"user_id":1,"social_network_id":2,"network_url":"test.com/k","created_at":"2018-06-06 23:15:19","updated_at":"2018-06-06 23:15:19"},{"id":6,"user_id":1,"social_network_id":5,"network_url":"test.com/k","created_at":"2018-06-06 23:16:15","updated_at":"2018-06-06 23:16:15"}]}},"socialNetowrks":{"available_networks":[{"id":1,"network_name":"Facebook","created_at":null,"updated_at":null},{"id":2,"network_name":"Instagram","created_at":null,"updated_at":null},{"id":5,"network_name":"Twitter","created_at":null,"updated_at":null}]}}

Answer 1

Вы можете попробовать это:

mounted() {
  setTimeout(() => {
    console.log(store.getters.getName);
  }, 400);
},

Answer 2

Попробуйте объявить определенные переменные в хранилище, чтобы правильно инициализировать данные:

const state = {
    user: {
        name: '',
        avatar: '',
        school: '',
        ...
    },
};

У меня была та же проблема, которую вы описали, пока я не сделал это.

Answer 3

Прежде всего, методы еще не были инициализированы в beforeCreate ловушке.Самый простой способ обойти это - использовать вместо этого created hook:

const app = new Vue({
    el: '#app',
    store,
    created(){
        store.dispatch('currentUser'); // considering you have properly imported and exported vuex
    }
});

В вашем компоненте

import {mapGetters} from 'vuex';

export default {
  computed: {
    ...mapGetters(['getName'])
  }
}