Почему не получается обратиться к getters?

Question

[Руслан Абсалямов]

Почему не получается обратиться к геттеру?

store:

import Vuex from 'vuex';
import Vue from 'vue';
import rest from './rest/api';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        user: null
    },
    mutations: {
        userState (state, payload) {
            state.user = payload;
        }
    },
    actions: {
        getUser(context) {
            let user = new rest('user.json');
            user.list().then(res => {
                context.commit('userState', res.data)
            })
                .catch(err => console.error(err));
        }
    },
    getters: {
        profile: state => {
            return state.user;
        }
    }
})

main.js:

...
//Подключаю хранилище
import store from './store';

store.dispatch('getUser');
new Vue({
    el: '#app',
    router: router,
    components:{
        'head-app':headImplant,
        'footer-app':footer,
        'sidebar-app': sidebar
    }
});

В компоненте вызываю этот геттер:

import store from '../../store'
    export default {
        name: "head",
        created: function () {
            console.log(store.getters.profile);
        }
    }

У меня показывает null, хотя если вызвать store.getters, то данные есть:

Answer 1

[0xD34F]

не получается обратиться к геттеру <...> показывает null, хотя если вызвать store.getters, то данные есть

"Показывает null" - значит не успели ещё данные загрузиться к тому моменту, когда вы дёргаете геттер, только и всего. Нечего тут сказки рассказывать про "не получается". Всё окей.

"Хотя" - не более чем особенность отображения объектов в консоли. Когда разворачиваете объект в первый раз, подтягивается его актуальное содержимое. Т.е., в консоль вы store.getters кидаете до получения данных, а смотрите что там есть уже после.

Не хотите в компоненте видеть этот null - не надо рендерить экземпляр компонента, пока данные не будут получены:

<компонент v-if="$store.getters.profile" />

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

//Подключаю хранилище
import store from './store';

store.dispatch('getUser');
new Vue({
    el: '#app',
    router: router,
    components:{
        'head-app':headImplant,
        'footer-app':footer,
        'sidebar-app': sidebar
    }
});

Где подключение-то? Просто импортировать в main.js экземпляр хранилища недостаточно, вы должны передать его в конструктор Vue, как свойство store объекта с настройками:

new Vue({
  store,
  ...

Answer 2

[Evgeny Kulakov]

Возможно экшн еще не отработал. Сделайте вот так для проверки:

store.dispatch('getUser').then(() => {
new Vue({
    el: '#app',
    router: router,
    components:{
        'head-app':headImplant,
        'footer-app':footer,
        'sidebar-app': sidebar
    }
})
})