Pinia Store初始状态写法差异：ViteSSG与SPA表现不同及return疑问

两种写法对比 #

写法一（仅ViteSSG环境正常，SPA环境报错） #

报错信息：Cannot destructure property 'state' of 'options' as it is undefined

export const useTestStore = defineStore({
    id: 'test',
    state: () => ({
        val: null
    })
})

写法二（SPA环境运行正常） #

export const useTestStore = defineStore('test', {
    state: () => {
        return {
            val: null
        }
    }
})

疑问解答 #

1. 为何SPA模式下写法一报错？ #

这和state函数里是否显式return无关，报错根源是**defineStore的调用参数格式兼容性问题**：

• Pinia的defineStore有两种合法调用形式：
  • 形式1：第一个参数传字符串类型的Store ID，第二个参数传包含state/actions/getters的配置对象（即写法二的格式），这种形式在所有Pinia版本中都支持。
  • 形式2：直接传入一个包含id字段的配置对象（即写法一的格式），这是Pinia 2.0.14及以上版本才新增的支持。
• 如果你的SPA环境使用的Pinia版本低于2.0.14，就会不支持形式2：旧版本会把你传入的单对象参数当成Store ID字符串处理，进而尝试读取不存在的第二个参数（配置对象）的state属性，最终抛出报错。而ViteSSG环境中大概率使用了更高版本的Pinia，所以写法一可以正常运行。

2. 是否可以省略return语句？ #

完全可以。state: () => ({ val: null })这种箭头函数的隐式返回写法，和显式return的效果完全一致，两种写法没有功能差异，都能正确定义状态对象。

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