Vue 中 Store 中的 getter 返回 ƒ isLoggedIn(state)答案

【问题标题】：Getter from Store in Vue return ƒ isLoggedIn(state)Vue 中 Store 中的 getter 返回 ƒ isLoggedIn(state)
【发布时间】：2020-11-25 20:34:46
【问题描述】：

我已经在我的 Vue 存储中存储了 Laravel 用户的状态，但试图这样获取它：

let isLoggedIn = store.getters.isLoggedIn

在控制台中调用该变量时，我得到：

ƒ isLoggedIn (状态) { 返回 state.user？真假; }

而不是true 或false。

我的商店代码：

let store = {
    state: {
        user: '',
    },
    mutations: {
        setAuthUser(state, user) {
            state.user = user;
        }
    },
    getters: {
        isLoggedIn(state) {
            return state.user ? true : false
        }
    }
};

export default store;

我的 app.js，我在其中调用 getter：

router.beforeEach((to, from, next) => {
  let isLoggedIn = store.getters.isLoggedIn
  console.log(isLoggedIn)
  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()!
  }
})

【问题讨论】：

只调用函数？ let isLoggedIn = store.getters.isLoggedIn()
stackoverflow.com/questions/63270741/…
getter 并不打算作为函数调用。它应该可以像您使用它一样工作，但是您的商店使用情况不正确。

标签： javascript vue.js vuex

【解决方案1】：

您没有正确初始化存储，这导致了您注意到的问题。您的商店代码只是导出一个普通对象而不是 Vuex.Store。

初始化存储：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

let store = /* ... */

export default new Vuex.Store(store)

【讨论】：

嗨，我在 app.js 中有： const app = new Vue({ el: '#app', store: new Vuex.Store(store), components: { Loading, }, router, });
stackoverflow.com/questions/63270741/…
好的，但是store.getters.isLoggedIn 中的store 指的是普通对象，它不是Vuex.Store 实例。您应该更新存储初始化以导出new Vuex.Store(store)，并从app.js 中删除实例化。