Не определено при вызове состояния в геттере (Vuex)

Question

Я пытаюсь получить статус сеанса входа в систему, который я сохранил в моем хранилище Vuex, но получаю:

Uncaught TypeError: невозможно прочитать свойство 'user' неопределенного

Мой магазин:

    let store = {
        state: {
            user: null
        },
        mutations: {
            setAuthUser(state, user) {
                state.user = user;
            }
        },
        getters: {
            isLoggedIn(state) {
                return state.user !== null;
            }
        }
    };
    
    export default store;

Ошибка возникает, когда я вызываю геттер:

    let isLoggedIn = store.getters.isLoggedIn()

Мое приложение. js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    import lang from 'element-ui/lib/locale/lang/es';
    import locale from 'element-ui/lib/locale';
    locale.use(lang);
    // Importamos vue router, para la transición entre páginas.
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    // Importamos Axios para las peticiones o llamadas.
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)
    // Importamos Vuevalidate, para validar obviamente.
    import Vuelidate from 'vuelidate'
    Vue.use(Vuelidate)
    // Importamos el componente que nos dara el efecto de cargar o loading
    import Loading from 'vue-loading-overlay';
    import 'vue-loading-overlay/dist/vue-loading.css';
    // Importamos el componente para las notificaciones flash
    import VueFlashMessage from 'vue-flash-message';
    Vue.use(VueFlashMessage);
    // Importamos Vuex
    import Vuex from 'vuex'
    import store from './store.js';
    Vue.use(Vuex)
    // Importamos UI Element
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    // Importamos componentes internos
    import isLoggedMixin from './components/mixins/Auth.js'
    import Index from './components/Index.vue'
    import Home from './components/Home.vue'
    import Registro from './components/Auth/Registro.vue'
    import Login from './components/Auth/Login.vue'
    import Olvide from './components/Auth/Olvide.vue'
    import Reset from './components/Auth/Reset.vue'
    // Componentes de TIENDA, PAGOS...
    import ListaTienda from './components/Tienda/Lista.vue'
    import NuevaTienda from './components/Tienda/Nueva.vue'
    import NuevaTiendaPaso2 from './components/Tienda/Nueva-paso2.vue'
    import NuevaTiendaPaso3 from './components/Tienda/Nueva-paso3.vue'
    import NuevaTiendaPasoDsc from './components/Tienda/Nueva-dsc.vue'
    import NuevaTiendaPasoOse from './components/Tienda/Nueva-ose.vue'
    import Pagos from './components/Tienda/Pagos.vue'
    import Comprobante from './components/Tienda/Comprobante.vue'
    // Componentes dentro del sistema
    import InicioSistema from './components/Procesos/Inicio.vue'
    
    /**
     * The following block of code may be used to automatically register your
     * Vue components. It will recursively scan this directory for the Vue
     * components and automatically register them with their "basename".
     *
     * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
     */
    
    // const files = require.context('./', true, /\.vue$/i)
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
    
    //Vue.component('example-component', require('./components/ExampleComponent.vue').default);
    Vue.component('index', Index);
    Vue.component('header-component', require('./components/Header.vue').default);
    Vue.component('footer-component', require('./components/Footer.vue').default);
    Vue.component('loading', Loading);
    
    const router = new VueRouter({
        mode: 'history',
        routes: [
          {
            path: '/',
            name: 'home',
            component: Home,
            meta: { headersistema: false, }
        },
        {
          path: '/ingresar',
          name: 'ingresar',
          component: Login,
          meta: { headersistema: false, requiresAuth: false, }
      },
          {
            path: '/registro',
            name: 'registro',
            component: Registro,
            meta: { headersistema: false, requiresAuth: false, }
        },
      {
        path: '/olvide-mi-contraseña',
        name: 'olvide-mi-contraseña',
        component: Olvide,
        meta: { headersistema: false, requiresAuth: false, }
      },
      {
        path: '/restablecer/contraseña/:id',
        name: 'restablecer-contraseña',
        component: Reset,
        meta: { headersistema: false, requiresAuth: false, }
      },
      {
        path: '/tiendas',
        name: 'lista-tiendas',
        component: ListaTienda,
        meta: { headersistema: false, requiresAuth: true, }
      },
    
      {
        path: '/crear-tienda/:id?',
        name: 'crear-tienda',
        component: NuevaTienda,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/crear-tienda/:id/paso-2',
        name: 'crear-tienda-paso-2',
        component: NuevaTiendaPaso2,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/crear-tienda/:id/paso-3',
        name: 'crear-tienda-paso-3',
        component: NuevaTiendaPaso3,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/crear-tienda/:id/dsc',
        name: 'crear-tienda-dsc',
        component: NuevaTiendaPasoDsc,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/crear-tienda/:id/ose',
        name: 'crear-tienda-ose',
        component: NuevaTiendaPasoOse,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/pagos/tienda/:id',
        name: 'pagos',
        component: Pagos,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/pagar/comprobante/:id',
        name: 'comprobante',
        component: Comprobante,
        meta: { headersistema: false, requiresAuth: true, }
      },
      {
        path: '/tienda/:id',
        name: 'tienda',
        component: InicioSistema,
        meta: { headersistema: true, requiresAuth: true, }
      },
        
    ],
    linkExactActiveClass: 'active',
      mode: 'history',
      scrollBehavior(){
          return {x:0, y:0}
      }
    });
    
    let isLoggedIn = store.getters.isLoggedIn()
      console.log(isLoggedIn)
    
    router.beforeEach((to, from, next) => {
      
      if (to.matched.some(record => record.meta.requiresAuth)) {
        
        // this route requires auth, check if logged in
        // if not, redirect to login page.
    
        if (!isLoggedIn) {
          next({
            path: '/ingresar',
            query: { redirect: to.fullPath }
          })
        } else {
          next()
        }
      } else {
        next() // make sure to always call next()!
      }
    })
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */
    
    const app = new Vue({
      el: '#app',
      store: new Vuex.Store(store),
      components: {
          Loading,
        },
        router,
    });

Answer 1

Из Vue документации для геттеров, способ вызова геттера в вашем случае будет

store.getters.isLoggedIn

Документация предоставляет случай, когда вы вызываете геттер таким же образом, как и вы.

Вы также можете передавать аргументы геттерам, возвращая функцию. Это особенно полезно, если вы хотите запросить массив в магазине:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Answer 2

Попробуйте импортировать геттеры следующим образом.

<template>
    <div v-if="isLoggedIn">User Online</div>
    <div v-else>User Offline</div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "MyApp",
    computed: {
        ...mapGetter(["isLoggedIn"])
    }
};
</script>