Vue3中Pinia执行Action后State未在模板实时更新问题求助

我正在使用Vue3，采用Pinia进行状态管理。点击Login按钮时，setUser Action会执行（已通过alert确认），Pinia的State已更新，但模板中未实时显示该变化；仅当修改模板并保存后，更新的状态才会显示。相关代码如下：

相关代码 #

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: 'gigi@gmail.com'
      },
      token: 'MY_API_TOKEN'
    }
    store.setUser(userData)
 }
 </script>

问题原因及解决方法 #

问题出在你直接将store.data和store.token赋值给普通变量user和token，这两个变量没有建立响应式关联。当Pinia状态更新时，user和token不会自动同步，只有组件重新渲染（如修改模板保存）时才会读取最新值。

以下是三种可行的解决方式：

方式一：直接在模板中引用store属性 #

修改模板，直接使用store实例的属性，利用Pinia本身的响应式特性：

<template>
  <div>
    {{ store.data }} {{ store.token }}
    <button @click="login">Login</button>
  </div>
</template>

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

  const store = useUserStore()

  const login = ()=> {
    const userData = {
      data: {
         name: 'Giorgi',
         lastname: 'Shalamberidze',
         email: 'gigi@gmail.com'
      },
      token: 'MY_API_TOKEN'
    }
    store.setUser(userData)
 }
 </script>

方式二：使用Pinia的storeToRefs工具函数 #

通过storeToRefs将store中的状态转换为响应式ref对象，确保赋值后的变量能同步状态变化：

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

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

  const store = useUserStore()
  // 解构出响应式的ref对象
  const { data: user, token } = storeToRefs(store)

  const login = ()=> {
    const userData = {
      data: {
         name: 'Giorgi',
         lastname: 'Shalamberidze',
         email: 'gigi@gmail.com'
      },
      token: 'MY_API_TOKEN'
    }
    store.setUser(userData)
 }
 </script>

方式三：使用Vue计算属性 #

通过Vue的计算属性包裹store状态，计算属性本身自带响应式特性：

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

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

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

  const login = ()=> {
    const userData = {
      data: {
         name: 'Giorgi',
         lastname: 'Shalamberidze',
         email: 'gigi@gmail.com'
      },
      token: 'MY_API_TOKEN'
    }
    store.setUser(userData)
 }
 </script>

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