Why can't I access getters?

Question

Vue.js

Why can't I access the getter in vuex.
my store code

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
    }
});

In the component I call this getter

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

It shows null for me, although if I call store.getters

Then it comes out for me

Answer 1

call this getter <...> shows null

This means that the data has not yet loaded by the time you pull the getter, that's all. There is nothing here to tell fairy tales about "it does not work." Everything is OK.

Answer 2

Perhaps the action has not worked yet. Do this to check:

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