如何使用 Pinia 存储数据来控制 Nuxt 3 中的组件

Question

我在 Nuxt 3 项目的共享布局中创建了一个覆盖层，并且我使用 v-model="isLoading" 来控制其可见性。

布局/default.vue

<template>
    <div class="appContainer">
        <slot/>
    </div>

    <v-overlay 
        v-model="isLoading"
        class="align-center justify-center"
    >
        <v-progress-circular
            indeterminate
            size="64"
            :width="6"
            color="light-blue"
        ></v-progress-circular>
    </v-overlay>
</template>

<script setup>
import { useStore } from '/stores/store.js'
const store = useStore()
const isLoading = store.isLoading
</script>

我还在stores/store.js文件中创建了一个isLoading值，它的默认值为false。

商店/store.js

export const useStore = defineStore('piniaStore', () => {
  
  const isLoading = ref(false)

  function toggleLoading() {
    isLoading.value = !isLoading.value
  }

  return {
    isLoading,
    toggleLoading,
  }
})

如果我想在 Login.vue 中的函数内打开叠加层，我该怎么做？我尝试使用 isLoading = !isLoading 或toggleLoading，但它不起作用。我怀疑这可能是更新组件渲染的问题。

页面/Login.vue

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

const store = useStore
let isLoading = store.isLoading

const loginRequest = () => {
    isLoading = true
};
</script>

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

Answer 1

我认为使用 nuxt 3 的一个解决方案是，您尝试使用存储中的 isLoading 变量和 v-model 绑定来控制覆盖的可见性。

要在 Login.vue 中的 loginRequest 函数中打开此叠加层，您需要调用toggleLoading

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

const store = useStore() let isLoading = store.isLoading

const loginRequest = () => {
    store.toggleLoading();
</script>

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

在您的请求中调用 store.toggleLoading() 您将切换 isLoading

Answer 2

后续：我做了两处修改，修改后问题就解决了：

1. 在文件layout/default.vue中：

// const isLoading = store.isLoading
// Change to
const { isLoading } = storeToRefs(store)

2. 在页面/Login.vue中：

将

store.toggleLoading

更改为

store.toggleLoading()

以调用此操作。

希望这对其他人有帮助！