Vuex+axiosで取得したデータに検索フィルターをかけたい

Question

Vuex初学者です。よろしくお願いします。
Vuex+axiosで取得した本の一覧にフィルターをかけたいです。（リアルタイム検索）
vue-cli3を使用しています。

〜現状〜
・表示させるのはidとname
・1つのinputでフリーワード(idでもnameでも)検索させたい
・表示するだけならうまくいく
・vuex+axiosを使ってデータ取得しなければ検索がうまくいく

store.js

export default new Vuex.Store({
  state: {
    books: [],
  },
  actions: {
    loadBooks ({ commit }) {
      axios
        .get(URL_BASE)
        .then(r => r.data)
        .then(books => {
        commit('SET_BOOKS', books)
        })
    }
  },
  mutations: {
    SET_BOOKS (state, books) {
      state.books = books
    }
  }
})

App.vue

<template lang="pug">
  .home
    .search-wrap
      // 検索
      input(
        type="text"
        v-model="searchQuery"
        placeholder="検索"
      )

    .result-wrap
      // noresultの場合
      div(v-show="books.length==0")
        span 結果はありません
      // 結果の表示
      ul
        li(v-for="book in books")
          span {{ book.id }}
          span {{ book.name }}

  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'home',
  components: {
    Btn
  },
  data () {
    return {
      searchQuery: ''
    }
  },
  // データの表示
  mounted () {
    this.$store.dispatch('loadBooks')
  },
  computed: {
    ...mapState([
      'books'
    ]),
    // 検索フィルター
    books() {
      return this.books.filter( book => {
        return this.searchQuery.toLowerCase()
          .split(/\s+/)
          .map( q => book.id.toLowerCase().indexOf(q) > -1 || book.name.toLowerCase().indexOf(q) > -1 )
          .every( result => result === true )
      })
    }
  }
}
</script>

このようにすると以下のエラーが出ます。

"RangeError: Maximum call stack size exceeded"

表示した後で検索というのが良くない？
store.jsで最初からフィルターをつける必要がある？

など考えたのですが、よく分からず質問させていただきました。

Answer 1

v-forでデータを回しているものに対してフィルターをかけるのではなく、フィルター内でデータを見るイメージで

v-for="data in filter"

    filter() {
      return this.books.filter( data => {
        return this.searchQuery.toLowerCase()
          .split(/\s+/)
          .map( q => data.id.toLowerCase().indexOf(q) > -1 || data.name.toLowerCase().indexOf(q) > -1 )
          .every( result => result === true )
      })
    }

としてあげたらできました。

Answer 2

computed に記載している books メソッドが自己参照していることがエラーの原因です。

...mapState(['books']) で展開した books を参照する意図だと思うのですが、名前が重複してしまっているため後に自分で記述している books() { ... が

return this.books ...

で参照され、結果循環参照となりスタックオーバーフローが発生しています。

何か別の名前にしてください。

Comments

[marion]

名前を変更したらできました、ありがとうございました。