Vuex值变更后切回首页，Watcher未触发请求的问题

你的问题核心是：从其他页面修改Vuex值后切回首页，首页的watch未触发请求。原因主要有两点：

1. watch监听目标错误：你当前监听的是selectedPokemonType.value，但Vue 3中computed返回的是ref对象，watch应直接监听这个ref对象而非.value属性。直接监听.value相当于监听静态值，无法捕获后续响应式变化。
2. 组件挂载时未触发watch：从其他页面切回首页时，组件会重新挂载，此时selectedPokemonType已是修改后的新值，但watch默认仅在值发生变化时触发，初始化时的初始值不会触发回调，因此不会发送请求。

修正后的代码 #

调整watch的写法如下：

const selectedPokemonType = computed(() => store.getters.getPokemonType) 

watch(selectedPokemonType, (newVal) => {
  getPokemonsByType(newVal.typeName).then(
    ({ data: { pokemon } }) =>
      store.commit(Mutations.SAVE_POKEMONS_BY_TYPE_TO_STORE, pokemon)
  )
}, { immediate: true }) // 添加immediate选项，组件挂载时立即执行一次回调

补充说明 #

• { immediate: true }的作用是让watch在组件挂载完成后立刻执行一次回调，确保无论首页自身修改值，还是从其他页面切回，只要Vuex中存在对应值，都会触发请求。
• 直接监听selectedPokemonType这个computed ref，才能正确捕获Vuex值的响应式变化。

内容的提问来源于stack exchange，提问作者Дмитрий Яровой