Vue3 Pinia动态Getter迁移问题：原Vue2 Vuex代码迁移后stac变量无法获取Getter返回值的解决方案咨询

我在将Vue 2+Vuex 3.4的代码迁移到Vue 3+Pinia环境时遇到了问题：原Vuex代码中通过getters[rel]能正确获取对应Getter的返回值，但我自己写的Pinia代码里state[rel]始终返回null或undefined，导致stac变量取值异常。

原Vuex代码 #

getLink: (state, getters) => rel => { 
  let link = state.data?.getLinkWithRel(rel); 
  let stac = getters[rel]; 
  let title = STAC.getDisplayTitle([stac, link]); 
  if (link) { 
    link = Object.assign({}, link); 
    link.title = title; 
  } else if (stac instanceof STAC) { 
    return { href: stac.getAbsoluteUrl(), title, rel }; 
  } 
  return link; 
},

我尝试的Pinia代码（存在问题） #

getLink: (state) => (rel) => { 
  let link = state.data?.getLinkWithRel(rel); 
  let stac = state[rel]; 
  let title = STAC.getDisplayTitle([stac, link]); 
  if (link) { 
    link = { ...link }; 
    link.title = title; 
  } else if (stac instanceof STAC) { 
    return { href: stac.getAbsoluteUrl(), title, rel }; 
  } 
  return link; 
},

补充信息 #

• rel是字符串类型，取值为Getter名称（parent或collection）
• 我迁移后的parent Getter代码：

parent: (state) => state.getStacFromLink('parent'),

• 我迁移后的collection Getter代码：

collection: (state) => state.getStacFromLink('collection'),

• getStacFromLink同样是一个Getter，目前观察到调用parent或collection时似乎无法获取Store状态。

解决方案 #

问题的核心是你没正确利用Pinia中Getter的参数来访问其他Getter，同时parent/collection的Getter写法也存在错误，具体修正如下：

1. 修正getLink Getter，通过getters参数访问其他Getter

Pinia的Getter函数和Vuex一样，可以接收第二个参数getters，用来访问当前Store中的其他Getter。你之前直接从state中取rel对应的属性，但parent/collection是Getter的计算结果，并非state上的直接属性，所以要改用getters[rel]：

getLink: (state, getters) => (rel) => { 
  let link = state.data?.getLinkWithRel(rel); 
  let stac = getters[rel]; // 改为通过getters访问目标Getter
  let title = STAC.getDisplayTitle([stac, link]); 
  if (link) { 
    link = { ...link }; 
    link.title = title; 
  } else if (stac instanceof STAC) { 
    return { href: stac.getAbsoluteUrl(), title, rel }; 
  } 
  return link; 
},

2. 修正parent/collection Getter，正确访问getStacFromLink Getter

因为getStacFromLink也是一个Getter，同样需要通过getters参数访问，而不是从state中获取（state里没有这个方法）：

// 修正后的parent Getter
parent: (state, getters) => getters.getStacFromLink('parent'),

// 修正后的collection Getter
collection: (state, getters) => getters.getStacFromLink('collection'),

这样修改后，getLink就能通过getters[rel]正确拿到parent或collection的计算结果，stac变量也不会再是null或undefined了。

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