Vuex Store - 从状态存储中获取数据以供查看答案

【问题标题】：Vuex Store - Get data from state store for viewingVuex Store - 从状态存储中获取数据以供查看
【发布时间】：2020-04-30 04:31:07
【问题描述】：

如何从状态存储中的对象获取数据以显示在我的组件字段中？

Vuex：

state:
 books: [], // this object has id, title, genre

actions:
 allBooks(context) {
      axios
      .get('/api/books')
      .then(response => context.commit('SET_BOOKS', response.data))
      .catch(error => console.log(error))
    },

mutations:
 SET_BOOKS(state, books) {
      state.books = books
    },

组件：

 created() {
      this.$store.dispatch('allBooks')
    },

    computed: {
      storeBooks() {
        return this.$store.state.books
      },
    },

现在，当我加载书籍页面时，我希望用来自 vuex 存储的数据填充 id、title 和genre 的字段。我无法一一访问对象中的数据。我尝试使用this.books.id = this.$store.books.id，但它不起作用。

【问题讨论】：

this.$store.books 应该是 this.$store.state.books 并且您无法访问数组的 id； this.$store.books.id，您应该在那里迭代您的列表以访问数组的每个对象
我错了，这是一个错字，感谢您的纠正

标签： vue.js vuex

【解决方案1】：

你说它不起作用到底是什么意思？您是否尝试过在该组件的页面上显示storeBooks？当你这样做时你会看到什么：

<div>{{ storeBooks }}</div>

如果您想显示每本书，只需使用v-for 循环：

<div v-for="book in storeBooks" :key="book.id">
  {{ book.title }}
</div>

【讨论】：

我可以看到整个对象，但无法单独获取/显示每个数据。如果我只想显示一个数据，例如标题，它会是 this.$store.state.books.title 吗？
@JimERussel 你已经创建了计算storeBooks 你可以使用它，你不需要使用this.$store.state.books。我更新了答案。如果您只想循环显示元素的 1 个属性，只需指定它{{ book.title }}
后续问题。我是否能够在不使用v-for? 的情况下实现这一目标
@JimERussel 是的，就像在javascript中一样，在括号中指定所需的索引，例如，获取第一个元素：<div>{{storeBooks[0].title}}</div>
@JimERussel 很高兴我能帮上忙