Обращение к state в блоке template

Question

какое обращение к state есть правильным?

 <CardItem
    v-for="card of $store.getters.getCardsByObject($route.params.id)"
    :key="card"
    v-bind:card="card"
  />

или

<CardItem
    v-for="card of cardsByObject"
    :key="card"
    v-bind:card="card"
  />

...
computed: {
  cardsByObject() {
    return this.$store.state.getCardsByObject(this.$route.params.id)
  }
}

Оба работают, но меня терзают сомнения по поводу написания + в документации описано только доступ через computed.

Answer 1

Всегда используйте computed. И никогда не обращайтесь к state стора напрямую. Это, конечно, не запрещено и так делать можно, но лучше всегда используйте геттеры. Если вам нужен геттер как функция - это можно сделать через замыкание.

<CardItem
  v-for="card of cardsByObject"
  :key="card"
  :card="card"
 />

...
computed: {
  cardsByObject() {
    return this.$store.getters.getCardsByObject(this.$route.params.id);
  }
}

Store:

...
getters: {
  getCardsByObject: (state) => (id) => {
    return state.cards.find((card) => card.id === id);
  }
}

БЛОГ НА HUSL

Обращение к state в блоке template

Ответы (1 шт):