Vue - 是否可以在组件的计算属性中使用 Vuex getter？

Question

在我的 vuex-store 中有不同的变量，例如loggedIn。现在我需要使用组件的computed 部分中的这个变量，因为我想根据变量值过滤数组。

在这里你可以看到我想在我的代码中如何使用它

<td v-for="(item, index) in navLinks" :item="navLink" :key="index">
  <router-link :to="{ name: item.name }" class="router-links" exact>{{ item.text }}</router-link>
</td>

这是我的script 部分的相关部分：

computed: {
  ...mapGetters(['user', 'loggedIn']),
  navLinks: [
    {
      vif: !this.loggedIn,
      name: 'Register',
      text: 'Registrieren',
    },
    {
      vif: this.loggedIn,
      name: 'Logout',
      text: 'Logout',
    },
  ],
},

我总是得到错误

未捕获的类型错误：无法读取未定义的属性“loggedIn”

所以我认为我不能在组件挂载之前使用 Vuex getter，因为 this 没有定义..？

如果我在 data 中使用 navLinks 和 v-if-directives，我会收到错误，因为 v-if 绑定不允许使用 v-for 绑定。

那么我该如何解决我的问题呢？

Answer 1

navLinks应该是一个返回数组的函数：

computed: {
  ...mapGetters(['user', 'loggedIn']),
  navLinks(){
  return [
    {
      vif: !this.loggedIn,
      name: 'Register',
      text: 'Registrieren',
    },
    {
      vif: this.loggedIn,
      name: 'Logout',
      text: 'Logout',
    },
  ];
 ),
},