Vue渲染提示getWatchLength未定义 mapGetters映射报错排查

控制台抛出 "getWatchLength" is not defined on the instance but referenced during render. Make sure to declare reactive data vue js properties in the data option 报错的核心原因是mapGetters辅助函数传参格式错误，导致计算属性未正确注册到组件实例，模板渲染时无法找到对应属性。
你当前的错误写法给mapGetters传入了两个独立数组参数：

...mapGetters( ["getWatchLength"], ["isLoggedIn"])

mapGetters仅支持接收一个数组/对象类型的参数，传入第二个参数时不仅第二个参数内容会被忽略，还会导致整个getter映射逻辑失效，哪怕Vuex store内已经正确定义了对应getter、可以正常读取值，组件实例也无法挂载对应的计算属性。

• 修正mapGetters传参格式，把所有需要映射的getter放到同一个数组中传入，修正后的computed配置代码如下：

computed: {
  ...mapGetters(["getWatchLength", "isLoggedIn"])
}

• 核对变量名大小写一致性：JavaScript区分大小写，要确保模板中引用的{{ getWatchLength }}、mapGetters中声明的属性名、Vuex store内定义的getter名称三者完全一致，不要出现getWatchlength（末尾L小写）这类拼写错误。
• 确认入口文件中已经将Vuex store实例正确注入Vue根实例，保证组件可以正常访问store上下文。

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