javascript - Nuxt Algolia InstantSearch：实现客户端动态获取时的服务端渲染

Question

TL;DR：有没有办法访问在 Vue 中创建的setup()变量mixins？

---

我是 Vue (/ Nuxt) 和使用 vue-instantsearch 的 Algolia 的新手。我想将 Algolia 添加到我的 Nuxt 3 应用程序中。

到目前为止，它可以工作，但是仅当页面在客户端呈现时。当它的服务器端渲染时它不起作用。幸运的是，Nuxt 中有服务器端渲染vue-instantsearch 的指南。

在文档中，它searchClient在组件之前启动，然后在 mixin 中使用该客户端，如下所示：

// ...

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

export default {
  mixins: [
    createServerRootMixin({
      searchClient,
      indexName: 'instant_search',
    }),
  ],

// ...

但是，就我而言，我想将搜索限制为用户。（不是每个用户都应该看到每个条目。）因此，我为我的用户动态生成令牌并searchClient在我的setup().

setup() {
  const sessionSearchTokenQuery = useQuery(gqlSessionSearchToken)
  const sessionSearchToken = useResult(sessionSearchTokenQuery.result)
  const searchClient = ref<SearchClient | null>(null)
  watch(
    sessionSearchToken,
    (token) => {
      if (token?.appID && token?.clientKey) {
        searchClient.value = algoliasearch(token.appID, token.clientKey)
      }
    },
    { immediate: true }
  )
  return { searchClient, token: sessionSearchToken }
},

所以现在我认为我无法访问searchClientmixins 中的 ，可以吗？

我该如何解决这个问题？有没有办法先获取客户端，然后启动 mixins 并将客户端传递给 mixins？是否有一个两组件解决方案，其中一个组件创建searchClient，将其传递给下一个组件，然后在 mixin 中使用它？

---

编辑：我正在使用一个 hacky 解决方案。

export default defineComponent({
  components: {
    SessionCardLoad,
  },
  provide() {
    return {
      $_ais_ssrInstantSearchInstance: this.instantsearch,
    }
  },
  setup() {
    const sessionSearchTokenQuery = useQuery(gqlSessionSearchToken)
    const sessionSearchToken = useResult(sessionSearchTokenQuery.result)
    const searchClient = ref<SearchClient | null>(null)
    watch(
      sessionSearchToken,
      (token) => {
        if (token?.appID && token?.clientKey) {
          searchClient.value = algoliasearch(token.appID, token.clientKey)
        }
      },
      { immediate: true }
    )
    const { data } = createServerRootMixin({searchClient, $config.MIML_STAGE + '-miml-sentences'})
    const { instantSearch } = data()
    return { searchClient, token: sessionSearchToken, instantsearch }
  },
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css',
        },
      ],
    }
  },
})

在这里，我使用 setup 中的 mixin 来获取 mixin 通常会返回的数据。我模仿了providemixin 代码中的步骤。

我在这里的主要问题是访问$config该setup()属性。

标签： javascriptvue.jsnuxt.jsalgolianuxtjs3