问题复现

前端项目使用Vue+Pinia时，加入了三个store进行状态管理。

编写测试完成一个store之后，添加下一个store并运行测试的时候，已经顺利运行的store在web控制台报错。

报错内容（复现的）报错内容（复现的）

出现诸如 xxx is not a function这样的错误，同时使用了该store的组件也无法正常运行。

问题解决以及分析

经过反复检查，发现是两个store在defineStore函数中使用了同样的名称‘store’，导致程序无法将正确的store实例传给使用了store的组件。

export const useMenuStore = defineStore("store", () => {
   ...
   return {
   ...
   }

}) 
//错误代码MenuStore.js
export const useUserInfoStore = defineStore("store", () => {
   ...
   return {
   ...
   }

}) 
//错误代码UserInfoStore.js

两个store使用同样的实例名称‘store’，实际上是编写代码时使用代码补全工具造成的疏忽。

Pinia官网在定义Store时提到第一个参数必须是唯一的ID

Screenshot 2024-03-17 160300.png

Pinia使用这个唯一的ID来对应store实例，并将这个store实例传给需要使用的组件。所以在上文代码中两个共用‘store’ID的实例中，在使用MenuStore的时候，用其ID‘store’查找到的实例实际上是一个UserInfoStore，并返回给了使用useMenuStore()的组件，组件在访问store内部的方法时就会发现没有预期的方法，因为这个实例的类型并不是想要的MenuStore。

在将两个Store的ID分别修改为‘MenuStore’、‘UserInfoStore’后程序正常运行。

总结

这是一个疏忽导致的漏洞，之前没有正确理解store的id的用处。同时在出现成功运行后又不能运行的情况时就应该开始排查是否共用了ID。AI代码补全也是导致这一问题的原因之一。