无法使用 vuex 实现 Search()答案

【问题标题】：Unable to implement Search() using vuex无法使用 vuex 实现 Search()
【发布时间】：2019-04-26 12:14:53
【问题描述】：

我想在搜索中输入内容时查看搜索结果，如果搜索为空，那么我想查看所有项目。但是调用了搜索方法，然后 state.inventory 没有更新所有项目

navbar.vue
<div class="input-field right">
          <input @keyup="search" id="search" type="search" required v-model="keyword">
          <label class="label-icon" for="search">
            <i class="material-icons">search</i>
          </label>
          <i class="material-icons">close</i>
        </div>

export default {
  data() {
    return {
      keyword: "",


    };
  },
methods: {
    search()
    {
      if(this.keyword != "")
        this.$store.dispatch("addToSearch", this.keyword);

    },

inventory.vue
<div v-for="(item,index) in items" :key="index" class="col s12 m4">

export default {
  computed: {
    items() {
      return this.$store.getters.getInventory;
    }
  },

  mounted() {
    this.fetchAllItem();
  },
  methods: {
        fetchAllItem() {
      axios.get("https://ekart-4c0aa.firebaseio.com/0/data.json")
      .then(response => {            
            this.items=response.data;
            console.log(this.items);
        this.$store.commit("setInventory", response.data);
      })
      .catch(error => {
        console.log(error);
      });
  },

store.js

mutations:{
addToSearch(state,payload){
                if(payload != ""){                    
                state.inventory= state.inventory.filter(item => {
                return item.title.toLowerCase().includes(payload.toLowerCase());
              });

        }  } }
actions: {
        addToSearch(context,payload){
            context.commit('addToSearch',payload)
        },

3 个阶段的预期结果：

【问题讨论】：

标签： vue.js search vuejs2 filtering

【解决方案1】：

我想您不需要在存储中更改数据集，只需将搜索词保留在那里即可。然后，当您调用 store getter 时，检查过滤数据集的结果是否为空，如果是，则重新运行完整数据集。此外，在您的组件中使用 mapGetters 以获得更清晰的代码。

【讨论】：