Vuex实现选中filteredResults项填充输入，页面导航/刷新保留输入值咨询

一、选中下拉条目填充搜索框 #

你现有代码的核心问题是<li>内部的<NuxtLink>会优先触发跳转，打断输入框赋值逻辑，修改模板的下拉列表代码即可：

<ul v-if="filteredResults != null" class="mt-2 absolute shadow-md rounded-lg">
    <li v-for="result in filteredResults" :key="result.id" class="p-2 bg-white hover:bg-gray-100">
      <!-- 阻止默认跳转，优先执行选中逻辑 -->
      <NuxtLink to="/" class="block" @click.native.prevent="selectAirport(result)">
        {{ result.icao }}, {{ result.iata }} {{ result.name }}
      </NuxtLink>
    </li>
</ul>

你原本写的selectAirport方法中已经包含输入框赋值逻辑，修改后点击条目就会正常把内容填充到输入框。如果不需要选中后立即跳转，直接移除<NuxtLink>标签，点击事件继续绑定在<li>上即可。

二、页面刷新/导航时保持输入框值 #

需要把输入框状态和Vuex持久化存储绑定，分三步修改：

步骤1：给Vuex新增getter，用于读取选中的机场 #

在你的store代码中添加getters配置：

export const getters = {
  getAirports: state => state.airports,
  // 新增：根据类型获取对应选中的机场
  getSelectedAirport: (state) => (type) => {
    return state.pairing[type]
  }
}

步骤2：修改组件的keyword为绑定Vuex的计算属性 #

不再把keyword存在组件本地data，修改组件script部分代码：

import { defineComponent } from '@vue/composition-api'
import { mapGetters, mapActions } from 'vuex'

export default defineComponent({
    setup(props) {},
    data() {
        return {
            // 仅存临时输入的搜索关键词，用于过滤下拉列表
            localKeyword: '',
        }
    },
    computed: {
      ...mapGetters({
            getAirports: 'getAirports',
            getSelectedAirport: 'getSelectedAirport'
      }),
      // keyword改为绑定Vuex的计算属性
      keyword: {
        get() {
          const selected = this.getSelectedAirport(this.type)
          return selected ? `${selected.icao}, ${selected.iata} (${selected.city}) / ${selected.name}` : ''
        },
        set(val) {
          this.localKeyword = val
        }
      },
      filteredResults() {
        if (this.localKeyword.length < 3) return null
  
        return this.getAirports.filter(item => { 
          if (!item.icao) return false

          return item.icao
            .toString()
            .toLowerCase()
            .includes(this.localKeyword.toLowerCase())
        })
      },
    },
    methods: {
      selectAirport: function(airport) {
        this.addAirport({airport: airport, type: this.type})
        this.localKeyword = `${airport.icao}, ${airport.iata} (${airport.city}) / ${airport.name}`
        // 如果需要选中后跳转，在这里手动执行即可
        // this.$router.push('/')
      },
      resetAirport: function() {
        if (this.localKeyword != null) {
          this.removeAirport(this.type)
          this.localKeyword = ''
        }
      },
      ...mapActions([
        'addAirport',
        'removeAirport'
      ])
    },
    props: {
      label: String,
      placeholder: String,
      type: String,
    }
})

步骤3：给Vuex添加持久化配置，刷新不丢失数据 #

Nuxt项目推荐用vuex-persistedstate实现持久化，操作如下：

1. 安装依赖：npm install vuex-persistedstate
2. 新建插件文件plugins/persistedstate.js：

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    // 只持久化选中的机场数据，减少存储冗余
    paths: ['pairing']
  })(store)
}

3. 在nuxt.config.js中注册插件：

export default {
  // 其他原有配置保持不变
  plugins: [
    { src: '~/plugins/persistedstate.js', ssr: false }
  ]
}

配置完成后，选中的机场数据会存在本地localStorage中，页面刷新、前进后退导航时，输入框都会自动读取Vuex中的缓存值，不会丢失。

内容的提问来源于stack exchange，提问作者Alexandru Ana