Pinia 状态不会因操作而改变

Question

我正在使用 vue3，对于状态管理，我正在使用 pinia。

Main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './index.css'
import App from './App.vue'

import router from './router'
const pinia = createPinia()

createApp(App)
.use(pinia)
.use(router)
.mount('#app')

/store/index.js

 import { defineStore } from "pinia";

 export const useUserStore = defineStore("user", {
   state: () => ({
     data: {},
     token: null,
   }),
   actions: {
     setUser(userData) {
     alert(userData) // confirm that state really changes
     this.data = userData.data
     this.token = userData.token
     }
   },
 });

Vue 模板：

<template>
  <div>
    {{ user }} {{ token }}
    <button @click="login">Login</button>
  </div>
</template>

<script setup>
  import {useUserStore} from "@store";

  const store = useUserStore()
  const user = store.data
  const token = store.token

  const login = ()=> {
    const userData = {
      data: {
         name: 'Giorgi',
         lastname: 'Shalamberidze',
         email: '[email protected]'
      },
      token: 'MY_API_TOKEN'
    }
    store.setUser(userData)
 }
 </script>

如您所见，我在 setUser 状态下有警报功能，用于检查单击模板中的登录按钮时操作是否有效。但它在模板中不起作用，例如，当单击登录时，此操作会运行并且状态会发生变化，但它们不会显示在 Vue 模板中。但是当我更改 vue 模板中的某些内容并使用 ctrl + s 保存其显示时。我不知道我做错了什么请帮助我谢谢。

Answer 1

您需要使用

storeToRefs

来解构您的商店，这将保持状态的反应性，这意味着您的 UI 将在状态更改时重新呈现。

import { storeToRefs } from "pinia";

const store = useUserStore();
const { data: user, token } = storeToRefs(store); // destructures "data" from store to new variable "user"

文档参考