Algolia – Vue 即时搜索属性观察器答案

【问题标题】：Algolia – Vue instant search attribute watcherAlgolia – Vue 即时搜索属性观察器
【发布时间】：2020-02-12 00:48:29
【问题描述】：

我的应用中有以下组件：

<ais-menu attribute="productType"></ais-menu>

我想查看此属性的更改，并在页面更改时对我的页面进行全局更改。

例如：

watch:{
  "state.productType": {
    deep: true,
    handler(state){
      console.log("If this text logs, my question is answered!");
    }
  }
}

有没有办法在搜索属性中添加观察者，或者有没有办法在属性更改时触发事件？

ais-menu docs 显示了您可以为组件设置的属性，但似乎没有任何您可以监听的事件，或者以下示例设置观察者。

同样，我想知道整个 <ais-instant-search> 组件上是否有可用的东西，但我在文档中找不到任何东西。

This issue 指的是 'searchStore._results' 属性，但后来的评论者说它不再有效。

watch: {
    'searchStore._results'(val) {
        // Emit event
    }
}

完整代码如下：

<template>
  <div>
    <ais-instant-search :search-client="searchClient" index-name="galeta_products" :routing="routing">
      <div class="centered-banner text-center">
        <h1 class="h2">{{ taxName }}</h1>
        <p>{{ taxDescription }}</p>
      </div>
      <ais-menu attribute="productType">
        <ul
          slot-scope="{
            items,
            canToggleShowMore,
            isShowingMore,
            toggleShowMore,
            refine,
            createURL,
          }"
        >
          <li v-for="item in items" :key="item.value" :class="{ 'active' : item.isRefined }">
            <a
              :href="createURL(item.value)"
              @click.prevent="refine(item.value)"
            >
              {{ item.label }}
            </a>
          </li>
        </ul>
      </ais-menu>

    </ais-instant-search>
  </div>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
import routing from './SearchRouting.js';

export default {
  props: ['taxName', 'taxDescription'],
  data() {
    return {
      liveTaxName: this.taxName,
      liveTaxDescription: this.taxDescription,
      searchClient: algoliasearch(
        'XXXXXXXX',
        'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      ),
      routing
    };
  },
  watch:{
    // Here is what I want to do
    "state.productType": {
      deep: true,
      handler(state){
        this.liveTaxName = TAXONOMIES.find(tax => tax.slug == state.category).name;
        this.liveTaxDescription = TAXONOMIES.find(tax => tax.slug == state.category).description;
      }
    }
  }
};
</script>

【问题讨论】：

不确定我是否完全理解了用例：基本上你想在菜单中选择的值之一发生变化时触发回调？例如选定的productType 从A 更改为B。对吗？
@SamuelVaillant 完全正确！

标签： algolia vue-instant-search

【解决方案1】：

一种可能的解决方案是将调用封装到refine 函数。然后您可以触发任何自定义代码。

<template>
  <!-- ... -->
  <ais-menu attribute="categories">
    <ul slot-scope="{ items, refine }">
      <li v-for="item in items" :key="item.value">
        <a href="#" @click.prevent="onMenuClick(item.value, refine)">
          {{ item.label }}
        </a>
      </li>
    </ul>
  </ais-menu>
</template>

<script>
export default {
  // ...
  methods: {
    onMenuClick(value, refine) {
      console.log(value);
      refine(value);
    }
  }
};
</script>

您可以在 CodeSandbox 上找到示例。

【讨论】：