Question

我想在搜索中键入某些内容时看到搜索结果，如果搜索为空，那么我想查看所有项。但是先调用搜索方法，然后状态。库存不会更新所有项目

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个阶段的预期结果：

Answer 1

我想您不需要在商店中对数据集进行突变，只需在其中保留搜索词即可。然后，当您调用store getter时，请检查其中的过滤数据集结果是否为空，如果是，请重新运行完整数据集。另外，在组件中使用mapGetters可获得更清晰的代码。

无法使用vuex实现Search（）

1 个答案: