Electron使用指南 - [16] 搜尋資訊

搜尋資訊的思路：在

/src/components/Header.vue

元件裡擷取到使用者從搜尋框裡的關鍵字(keyword)，儲存在

Store

裡，再做個

getter

, 過濾

items

資訊，修改

Main.vue

元件的渲染資訊源。

1、定制 Store

修改

src/store/modules/main.js

：

// ...

const state = {
  // ...
  keywords: ''
}

const mutations = {
  // ...

  changeKeywords(state, keywords) {
    state.keywords = keywords
  }
}

const actions = {
  // ...

  changeKeywords({commit}, keywords) {
    commit('changeKeywords', keywords)
  }
}

const getters = {
  filteredItems(state) {
    if (state.keywords) {
      return state.items.filter((value, index) => {
        return value.title.indexOf(state.keywords) != -1
      })
    }

    return state.items
  }
}

export default {
  // ...

  getters
}
           

2、修改 Header.vue

處理

/src/componnent/Header.vue

的 keywords 資訊擷取與存儲：

<template>
  <header>
    // ...
    <input type="text" @keyup.enter="searchItem" v-model="keywords" id="search" placeholder="搜尋...">
  </header>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      keywords: ''
    }
  },

  methods: {
    ...mapActions(['setModalVisible', 'changeKeywords']),

    searchItem() {
      this.changeKeywords(this.keywords)
    }
  },
}
</script>
           

3、修改 Main.vue

修改

/src/components/Main.vue

，擷取關鍵字和修改資料渲染資料源。

<template>
  <main>
    // ...
    <div id="items">
      <div 
        v-for="(item, index) in filteredItems"
        // ...
      >
        // ...
      </div>
    </div>
  </main>
</template>

<script>
// ...
export default {
  // ...

  computed: {
    // ...

    ...mapGetters(['filteredItems'])
  },

  // ...
}
</script>