时间戳

首页 > 解决方案 > Nuxt 商店 mapGetters 属性在 beforeCreate() 钩子上未定义

vuejs2 - Nuxt 商店 mapGetters 属性在 beforeCreate() 钩子上未定义

问题描述

我在使用 vuex 的 nuxt 应用程序中遇到错误。我正在尝试使用 mapGetters 助手访问存储获取器，但是当我在 beforeCreate() 中访问该属性时，挂钩值未定义。

商店/user.js

import VuexPersistence from "vuex-persist";

export const plugins = [VuexPersistence];

export const state = () => ({
  user: null,
});


export const getters = {
  isLoggedIn(state) {
    if (state && state.user) {
      console.log("state.user", state.user);
    }
    return state.user !== null && state.user !== {};
  },
};

我的组件.vue

export default {
  beforeCreate() {
    const isLoggedIn = this.$store.getters["user/isLoggedIn"];

    console.log("computed isLoggedIn", this.isLoggedIn);
    console.log("isLoggedIn", isLoggedIn);
  },
  computed: {
    ...mapGetters(["user/isLoggedIn"]),
  },
};
</script>

这是浏览器控制台中的输出结果

在此处输入图像描述

标签： vuejs2nuxt.js

解决方案

该商店在 beforeCreate 挂钩中不可用。您可以将代码移动到mounted() 挂钩，但我建议将其放在中间件中以检查用户是否已登录。

中间件/auth-check.js


export default function ({ store }) {
  const isLoggedIn = store.getters["user/isLoggedIn"];
  // do something...
}

然后添加到您的页面：

export default {
  ...
  middleware: 'auth-check'
  ...
}

推荐阅读