Vue3中使用pinia解构store

最新推荐文章于 2025-07-02 09:06:29 发布

原创最新推荐文章于 2025-07-02 09:06:29 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端 #javascript

本文介绍了在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: {
        
    }
})