Vue - Можно ли использовать геттеры Vuex в вычисляемом свойстве компонента? - PullRequest
Новая
       42

Vue - Можно ли использовать геттеры Vuex в вычисляемом свойстве компонента?

0 голосов
/ 25 апреля 2020

В моем vuex-магазине есть разные переменные, например 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',
    },
  ],
},

Я всегда получаю ошибку

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

Так что я думаю, что не могу использовать геттеры Vuex до монтирования компонента, потому что this не определено ..?

Если бы я использовал navLinks в директивах data с v-if, я бы получил ошибку, потому что v-если привязки не разрешены с v- для привязок.

Так, как я могу решить мою проблему?

1 Ответ

1 голос
/ 25 апреля 2020

navLinks должна быть функцией, которая возвращает массив: 

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