小编Udo*_*ada的帖子

我使用 nuxt/auth 模块对我的 nuxt 网络应用程序进行了身份验证。我还使用模块化 vuex 存储来处理不同的状态。登录后，一切正常，我可以正常浏览应用程序。但是当我尝试重新加载页面或直接通过 URL 访问它时，用户无法访问，因此整个网络应用程序变得无法使用。我尝试使用 访问用户对象this.context.rootState.auth.user，它在页面重新加载或直接访问后为空。奇怪的是，这只发生在生产中。

我已经尝试添加一个 if-guard，但遗憾的是 getter 没有反应。可能是因为它是一个嵌套对象。这是我目前的吸气剂：

 get someGetter() {
    if (!this.context.rootState.auth.user) {
      return []
    }
    const userId = this.context.rootState.auth.user.id as string
    const arr = []
    for (const item of this.items) {
        // Using userId to add something to arr
    }
    return arr
  }

有没有办法在初始化 vuex 模块之前强制 nuxt 完成身份验证，或者使这个 getter 具有反应性，以便在用户对象可访问时再次触发？

这是我的 auth-config 在 nuxt.config.ts 中的样子：

auth: {
  strategies: {
    local: {
      _scheme: '@/auth/local-scheme',
      endpoints: {
        login: {
          url: '/api/authenticate',
          method: …

我正在使用一个v-autocomplete组件来搜索 google api 上的位置。因此，items在设置搜索输入后，数组就会被填充。现在，我尝试设置一个在用户输入建议火车站之前要搜索的默认值。

例如，搜索已针对伦敦城市打开，现在我不想将搜索输入设置为伦敦火车站，以便用户看到该搜索的结果。但是，当我将搜索输入设置为默认值时，它每次都会重置为空。

这是我的模板：

    <v-autocomplete
      ref="trainStationSearch"
      v-model="select"
      :items="places"
      :search-input.sync="searchTerm"
      no-filter
      return-object
    >
      <template #item="data">
        <v-list-item-content>
          <v-list-item-title>{{ data.item.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ data.item.subtitle }}</v-list-item-subtitle>
        </v-list-item-content>
      </template>
    </v-autocomplete>

这里的逻辑是：

• 我在 上有一个观察程序，它会使用 Lodash 的函数searchTerm触发去抖搜索debounce
• searchTerm我尝试在钩子中设置mounted道具的值prefill
  • 在超时的情况下执行此操作会触发观察器并显示组件输入上searchTerm的值。不久后重置为prefillv-autocompletesearchTermnull
  • 没有超时的情况下执行此操作会导致立即searchTerm设置null

  @Prop() readonly prefill?: string

  private places: any = []
  private searchTerm: string | null = ''
  private select: any = null

  private …