Vue3中使用pinia解构store

最新推荐文章于 2025-03-20 09:49:05 发布

是小张呀！

最新推荐文章于 2025-03-20 09:49:05 发布

阅读量660

点赞数

文章标签： typescript 前端 javascript

本文链接：https://blog.csdn.net/qq_52099965/article/details/127466630

版权

本文介绍了在Pinia状态管理库中，直接解构store会导致响应性丢失的问题，并提出了解决方案——使用storeToRefs。通过示例代码展示了如何在模板和脚本中使用storeToRefs保持响应性，以及定义和使用自定义的useStore。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解构store

在Pinia是不允许直接解构是会失去响应性的, 解决方案可以使用 storeToRefs

<template>
  <div>
    {{ user.name }}----{{ user.age }}
    <button @click="change">改变值</button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "./store";
import { storeToRefs } from 'pinia'

const user = useStore();

// 解构不具备响应式 可以使用storeToRefs
const { name, age } = storeToRefs(user)

const change = () => {
  name.value = '小黑'
  age.value = 20
}
</script>

<style scoped></style>

import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
    state:()=> {
        return {
            name: 'zs',
            age: 18
        }
    },
    getters: {

    },
    actions: {
        
    }
})