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 信息获取与存储：

3、修改 Main.vue

修改 /src/components/Main.vue，获取关键字和修改数据渲染数据源。