Javascript 在vuejs中使用变异过滤？

我正在尝试使用vuex筛选出我的表。我是vuex的新手，所以我试图了解它到底是如何工作的。我有一个数据表，它是一个组件，还有一个搜索字段，它是一个单独的组件。我正在尝试从表中筛选数据，但如何使用vuex进行筛选

我制作了一个代码笔用于演示，但我不知道如何使用存储在代码笔中或制作单独的组件：。希望这能给你一个关于我努力实现的想法

在我的搜索字段组件中，我有：

   <template>
    <v-text-field
      v-model="search"
      append-icon="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
    </template>

   <script>
    export default {
     data() {
       return {

       }
       },

       computed: {
       search() {
      return this.$store.state.search
         }
      }
     </script>

---

提前谢谢。

您可以从商店的状态获取

搜索

，并将其绑定到表的组件：

computed: {
  search() {
    return this.$store.state.search
  }
}

然后，您可以在v-data-table中使用

搜索

<v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
/>

在你的商店里，创造变异

mutations: {
  updateSearch (state, payload) {
    state.search = payload
  }
}

您可以从存储的状态获取
search
，并将其绑定到表的组件：

computed: {
  search() {
    return this.$store.state.search
  }
}

然后，您可以在v-data-table中使用
搜索

<v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
/>

在你的商店里，创造变异

mutations: {
  updateSearch (state, payload) {
    state.search = payload
  }
}

这可能不是vuex的最佳选择。数据需要在vuex中，然后使用操作（可选）和变异来修改过滤器，从而更新结果。好处是其他组件可以访问过滤后的结果，但在本例中，这似乎不是您在该组件之外需要的东西。此外，您的vuetify表已经在内部处理搜索，因此不需要它，也不清楚您是要存储搜索以备将来使用，还是要在vuex中执行筛选。@Daniel我想让它在vuex中执行筛选并将其传递到数据表。这可能不是vuex的最佳选择。数据需要在vuex中，然后使用操作（可选）和变异来修改过滤器，从而更新结果。好处是其他组件可以访问过滤后的结果，但在本例中，这似乎不是您在该组件之外需要的东西。另外，您的vuetify表已经在内部处理搜索，因此不需要它，也不清楚您是要存储搜索以备将来使用，还是要在vuex中执行筛选。@Daniel我想让它在vuex中执行筛选并将其传递到数据表。这样我就不需要改变状态了？只需要状态本身就可以了？您只需要在搜索组件中改变状态。在table component中，您应该是只读的。我收到一条错误消息，搜索被分配到文本字段，但它没有setter。非常感谢。这正是我需要的。如果你不介意的话，你能解释一下如何、何时以及为什么使用双向突变吗？你可以在这里阅读更多内容，这样我就不需要对状态进行突变了？只需要状态本身就可以了？您只需要在搜索组件中改变状态。在table component中，您应该是只读的。我收到一条错误消息，搜索被分配到文本字段，但它没有setter。非常感谢。这正是我需要的。如果您不介意，请您解释一下如何、何时以及为什么使用双向突变？您可以在这里阅读更多内容