Nuxt开发搜索栏时v-model绑定Vuex action提示未知类型如何解决

问题排查与解决方案 #

核心报错原因 #

Nuxt 会自动将 store 目录下的每个 .js 文件注册为带命名空间的独立 Vuex 模块，你的 Store 文件名为 ListActivity.js，对应的模块名就是 ListActivity，调用模块内的 action、mutation、getter 时必须添加模块名前缀，否则无法识别对应方法。

修正步骤 #

1. 修正 action 调用写法
   把组件中 searchWord 计算属性的 set 方法里的 dispatch 代码，加上模块前缀：

   // 原错误写法
   // this.$store.dispatch('filtered_Activity', value)
   // 修正后写法
   this.$store.dispatch('ListActivity/filtered_Activity', value)
   

2. 同步修正 getter 调用写法
   你当前的 getter 调用也没有加模块前缀，会出现取值异常，同步修正：

   // get方法修正
   get () {
     return this.$store.getters['ListActivity/getSearchWord']
   }
   // filteredActivity计算属性里的getter修正
   let a = (this.$store.getters['ListActivity/getFilteredActivity'] || this.$store.state.ListActivity.allActivity)
   

其他可选优化&检查点 #

• 如果不想每次调用都加前缀，可以在 ListActivity.js 中导出配置关闭命名空间：

  export const namespaced = false
  

  不推荐该做法，容易出现多模块方法名冲突问题。
• 确认 ListActivity.js 直接放在项目根目录的 store 文件夹下，若存放在子目录中，命名空间需要额外加上子目录路径。
• 模板中的 <li> 标签需要用 <ul> 或 <ol> 包裹，符合HTML语义规范。

内容的提问来源于stack exchange，提问作者Heurtault Aubin