如何将Pinia状态可靠转换为Nuxt组件本地状态？

问题背景 #

在Nuxt应用中，编辑用户资料页面需要从Pinia store获取profile数据，本地修改后再通过store的updateProfile同步到数据库。但直接复制store.profile到本地响应式变量时，会遇到Pinia初始化滞后导致本地变量无法获取后续加载数据的问题，现有通过$subscribe的实现较为繁琐。

优化方案 #

方案一：使用watch监听store状态同步本地数据 #

利用Vue的watch监听store中profile的变化，当数据从服务器加载完成后自动同步到本地响应式变量，无需手动订阅store的mutation。

<script setup lang="ts">
import { useStore } from '~~/stores'
import { Database } from '~~/types/supabase'
import { reactive, watch } from 'vue'

type Profile = Database['public']['Tables']['profiles']['Row']

const store = useStore()
// 初始化空的本地编辑用profile
const localProfile = reactive<Partial<Profile>>({ id: '', important_field: 0 })

// 监听store.profile变化，同步到本地
watch(
  () => store.profile,
  (newProfile) => {
    if (newProfile) {
      Object.assign(localProfile, newProfile)
    }
  },
  { immediate: true } // 立即执行一次，处理已存在的初始数据
)
</script>

<template>
  <div>
    Profile
    <div v-if="store.profile">
      <label>
        Important Field
        <input type="number" v-model="localProfile.important_field">
      </label>
    </div>
    <button @click="store.updateProfile(localProfile as Profile)" :disabled="!store.profile">Save</button>
  </div>
</template>

方案二：在Pinia Store中新增临时编辑状态 #

直接在store中维护专门用于编辑的临时profile，组件绑定这个临时状态，保存时再同步到正式profile和数据库。这种方式更符合Pinia的状态管理逻辑，减少组件内的额外同步代码。

修改后的store代码：

import { defineStore } from 'pinia'
import { Database } from '~~/types/supabase'

interface Profile {
    id: string
    important_field: number | null
}

interface State {
    profile: Profile | null
    editProfile: Profile | null // 新增临时编辑状态
}

export const useStore = defineStore('main', {
    state: (): State => {
        return {
            profile: null,
            editProfile: null
        }
    },
    actions: {
        async getProfile() {
            const { data: profile, error } = await useSupabaseClient<Database>().from('profiles').select().limit(1).single()
            if (profile) {
                this.profile = profile
                // 同步到编辑状态
                this.editProfile = { ...profile }
            }
        },
        async updateProfile() {
            if (!this.editProfile) return
            // 同步到正式profile
            this.profile = { ...this.editProfile }
            const { error } = await useSupabaseClient<Database>()
                .from('profiles')
                .update(this.editProfile)
                .eq('id', this.editProfile.id)
        }
    },
})

组件代码：

<script setup lang="ts">
import { useStore } from '~~/stores'

const store = useStore()
</script>

<template>
  <div>
    Profile
    <div v-if="store.editProfile">
      <label>
        Important Field
        <input type="number" v-model="store.editProfile.important_field">
      </label>
    </div>
    <button @click="store.updateProfile()" :disabled="!store.editProfile">Save</button>
  </div>
</template>

方案三：使用useAsyncData确保数据加载完成后渲染页面 #

在/profile页面中，利用Nuxt的useAsyncData等待getProfile执行完成后再渲染组件，确保组件初始化时store.profile已有值，可直接复制到本地变量。

<script setup lang="ts">
import { useStore } from '~~/stores'
import { Database } from '~~/types/supabase'
import { reactive } from 'vue'

type Profile = Database['public']['Tables']['profiles']['Row']

const store = useStore()

// 等待profile数据加载完成
await useAsyncData('profile', () => store.getProfile())

// 此时store.profile已存在，直接复制到本地
const localProfile = reactive<Profile>({ ...store.profile! })
</script>

<template>
  <div>
    Profile
    <div>
      <label>
        Important Field
        <input type="number" v-model="localProfile.important_field">
      </label>
    </div>
    <button @click="store.updateProfile(localProfile)">Save</button>
  </div>
</template>

方案对比 #

• 方案一：适合不需要修改store结构的场景，通过watch实现组件内状态同步，逻辑清晰。
• 方案二：将编辑状态统一管理在store中，减少组件内状态维护代码，适合多组件编辑同一状态的场景。
• 方案三：利用Nuxt异步数据加载能力，确保组件渲染时数据就绪，代码最简洁，但依赖页面级异步加载。

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