Question

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

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，标题和流派的字段。我无法一一访问对象中的数据。我尝试使用this.books.id = this.$store.books.id，但无法正常工作。

Answer 1

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

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

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

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

Vuex存储-从状态存储获取数据以供查看

1 个答案: