如何在Nuxt 3中通过Pinia Store控制加载遮罩组件的显示

你的问题出在Login.vue中对Pinia store的使用方式错误，导致无法正确触发响应式更新，以下是修正方案：

错误点分析 #

1. 未正确初始化Store实例：const store = useStore 只是引用了函数，没有调用它获取实际的store实例，必须加括号执行：const store = useStore()
2. 错误修改响应式变量：Pinia中定义的isLoading是ref类型，直接赋值isLoading = true会切断响应式关联，必须通过.value修改，或者调用store中定义的方法
3. 不必要的变量赋值：无需将store.isLoading重新赋值给局部变量，直接使用store的属性即可保持响应式

修正后的Login.vue代码 #

<script setup>
import { useStore } from '/stores/store.js'

// 正确获取store实例
const store = useStore()

const loginRequest = () => {
    // 方式一：直接修改isLoading的value值（推荐，明确控制加载状态）
    store.isLoading.value = true;

    // 方式二：调用store中的toggleLoading方法（适合需要切换状态的场景）
    // store.toggleLoading();
};
</script>

<template>
    <v-form @submit="loginRequest">
        <v-input></v-input>
        <v-btn type="submit">登录</v-btn>
    </v-form>
</template>

可选优化：布局文件的响应式处理 #

为了更规范地保持响应式，layouts/default.vue中可以使用Pinia提供的storeToRefs解构属性，避免响应式丢失：

<script setup>
import { useStore } from '/stores/store.js'
import { storeToRefs } from 'pinia'

const store = useStore()
// 使用storeToRefs解构响应式状态
const { isLoading } = storeToRefs(store)
</script>

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