定义一个Store 在深入了解核心概念之前，我们需要知道Store是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：import{defineStore}from'pinia'//useStore可以是useUser、useCart之类的任何东西//第一个参数是应用程序中store的唯一i

先来看一下我们的文件夹吧：大多数vue3前端项目中都会有这样一个文件夹是用来存放全局变量的地方，用来做状态管理。我们项目中使用的状态管理工具其实就是Pinia，当然不是我推荐大家用的，这个有迹可循，因为Pinia是在Vue官网上被推荐的一种方式。下面截几张官网上的图片：然后给

前言日常开发时有些业务场景功能很复杂，如果将所有代码都写在一个vue组件中，那个vue文件的代码量可能就几千行了，维护极其困难。这时我们就需要将其拆分为多个组件，拆完组件后就需要在不同组件间共享数据和业务逻辑。有的小伙伴会选择将数据和业务逻辑都放到pinia中，这样虽然可以解决

状态管理 src/views/Pinia.vue<scriptsetup>import{ref}from"vue";import{storeToRefs}from"pinia";import{useCounterStore}from"../stores/counter";import{useTodos}from"../stores/todos";//可

1、响应式本质就是把数据和函数相关联起来，当数据变化时，函数自动执行。当然这对于函数和数据也是有要求的函数必须是以下几种:rendercomputedwatchwatchEffect数据必须是以下几种：响应式数据在函数中用到的数据2、例子2.1<template><divclass="responsive"><h

在Pinia中有option和setup两种写法OptionStore与Vue的选项式API类似，我们也可以传入一个带有 state、actions 与 getters 属性的Option对象exportconstuseCounterStore=defineStore('counter',{state:()=>({count:0}),getters:{double:(state)

store是一个用reactive包装的对象，这意味着不需要在getters后面写.value，就像setup中的props一样，如果你写了，我们也不能解构它：<scriptsetup>conststore=useCounterStore()//❌这将不起作用，因为它破坏了响应性//这就和直接解构`props`一样const{name,doubl

computed() 会自动从其计算函数的返回值上推导出类型<template><h3>{{doubleCount}}</h3></template><scriptsetuplang="ts">import{ref,computed}from"vue"constcount=ref<number>(100)//推导得到的类型：ComputedRef&l