Как использовать геттеры vue для поиска значения внутри объекта?

#vue.js #vuex

Вопрос:

Я хочу получить конкретное значение объекта внутри состояния vuex.

Позвольте мне показать вам, что я имею в виду:

 import { createStore } from "vuex";  export default createStore({  state: {  cards: [{  title: "Blog 1",  htmlCode: "This is blog 1",  index: 1,  },  {  title: "Blog 2",  htmlCode: "This is blog 2",  index: 2,  },  {  title: "Blog 3",  htmlCode: "This is blog 3",  index: 3,  },  {  title: "Blog 4",  htmlCode: "This is blog 4",  index: 4,  },  {  title: "Blog 5",  htmlCode: "This is blog 5",  index: 5,  },  {  title: "Blog 6",  htmlCode: "This is blog 6",  index: 6,  },  {  title: "Blog 7",  htmlCode: "This is blog 7",  index: 7,  },  ],  },  getters: {  getTodoById: (state) =gt; (id) =gt; {  return state.cards.find(todo =gt; todo.index === id)  }  },  mutations: {},  actions: {},  modules: {}, });

Теперь , если я вставлю это значение в свой код: lt;pgt;{{ this.$store.getters.getTodoById(2) }}lt;/pgt; , я получу это в результате: { "title": "Blog 2", "htmlCode": "This is blog 2", "index": 2 } То, что я хочу, — это значение, например htmlCode , и этот результат будет This is blog 2 .

Надеюсь, кто-нибудь поймет, что я имею в виду.

Для ясности: я хочу, чтобы этот результат отображался в браузере: Это блог 2

Для моего сайта очень важно, чтобы это делалось с помощью геттеров vuex.

1. вы пытались получить доступ к заголовку с помощью точечной записи? {{ $store.getters.getTodoById(2).title }} ? Я бы, вероятно, обошел, чтобы в шаблоне не было этого нечитаемого кода, и вместо этого создал метод или вычисляемое свойство, которое возвращает только заголовок.

Ответ №1:

Это возможное решение

 getTodoById: (state) =gt; (id) =gt; {  const todo = state.cards.find(todo =gt; todo.index === id)  return todo.htmlCode }

Другим решением является создание todo данных в компоненте и created() добавление вашего получателя и подписи к этим данным.

 data() {  return {  todo: null,  };  },  created() {  this.todo = this.$store.getters.getTodoById(id) // for example extracted by the route  },

 lt;pgt;{{ todo.htmlCode }}lt;/pgt;

Ответ №2:

Это должно сработать.

 lt;pgt;{{ this.$store.getters.getTodoById(2).htmlCode}}lt;/pgt;