这里写目录标题
前言
Pinia 是一个现代的、类型的 Vuex 替代品，专门为 Vue 3 设计的状态管理库。它提供了一种更简洁、更直观的方式来管理应用的状态。本篇笔记，主要记录vue项目中pinia相关的内容。
链接: 官方文档
一、Pinia 的主要特点
1、类型安全
Pinia 提供了强大的 TypeScript 支持，确保你在开发过程中能够获得更好的类型检查和自动补全。
2、模块化设计
你可以将状态管理拆分为多个 store，每个 store 负责管理一部分状态，使得代码更加模块化和可维护。
3、简洁的API
Pinia 的 API 设计简洁明了，减少了样板代码，使得状态管理更加直观。
4、热重载支持
在开发过程中，Pinia 支持热重载，修改 store 代码后不需要重新启动开发服务器。
5、插件系统
Pinia 提供了插件系统，允许你扩展 store 的功能，例如持久化状态、日志记录等。
二、Pinia的使用
1、基本用法
(1)、安装Pinia
npm install pinia
# 或者
yarn add pinia
(2)、创建Store
store 是一个包含状态（state）、动作（actions）和 getters 的对象。
// src/stores/counter.ts
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
//存储数据的地方
state(){
return{
count: 0
}
},
// 存储方法的地方，用于响应组件的动作。
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
//计算属性
getters: {
doubleCount: (state) => state.count * 2,
},
});
(3)、注册Store
在 Vue 应用中注册 Pinia 并使用 store。在 Vue 应用中注册 Pinia 并使用 store。
// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
const app = createApp(App);
// 创建 Pinia 实例
const pinia = createPinia();
// 注册 Pinia
app.use(pinia);
// 挂载应用
app.mount('#app');
(4)、在组件中使用Store
<template>
<div>
<p>Count: {{ counter.count }}</p>
<p>Double Count: {{ counter.doubleCount }}</p>
<button @click="counter.increment">Increment</button>
<button @click="counter.decrement">Decrement</button>
</div>
</template>
<script setup>
import { useCounterStore } from './stores/counter';
const counter = useCounterStore();
/*
对于store数据的操作有三种方式：
1、直接操作
counter.count += 1;
2、批量修改
counter.$patch({
count:2,
});
3、借助action修改
counter.increment();
*/
</script>
2、storeToRefs的使用
storeToRefs 是 Pinia 提供的一个辅助函数，用于将 store 中的响应式状态（state）和计算属性（getters）转换为普通的响应式引用（refs）。
注意：直接解构 store 的状态会导致失去响应式。
// 错误的做法
const { count, doubleCount } = counterStore; // 失去响应式
const { count, doubleCount } = storeToRefs(counterStore); // 保持响应式
使用步骤
import { useCounterStore } from './stores/counter';
//1、引入storeToRefs
import { storeToRefs } from 'pinia';
//2、获取 store 实例
const counterStore = useCounterStore();
//3、使用 storeToRefs 转换状态和计算属性
const { count, doubleCount } = storeToRefs(counterStore);
storeToRefs与toRefs的区别
适用对象：
toRefs：适用于任何响应式对象（通常是通过 reactive 创建的对象）。
storeToRefs：专用于 Pinia store，处理 store 中的状态和计算属性。
功能范围：
toRefs：只处理响应式对象的属性，不处理方法（actions）。
storeToRefs：处理 Pinia store 的状态和计算属性，不处理方法( actions)。
使用场景：
toRefs：通常用于组件内部，处理组件的响应式数据。
storeToRefs：通常用于组件内部，处理 Pinia store 的状态和计算属性。
3、$subscribe订阅方法
$subscribe 是 Pinia 提供的一个方法，用于订阅 store 的状态变化。通过 $subscribe，你可以在状态发生变化时执行特定的回调函数，这对于实现日志记录、分析或其他需要监听状态变化的场景非常有用。
// src/components/Counter.vue
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script setup>
import { useCounterStore } from './stores/counter';
import { onMounted, onUnmounted } from 'vue';
const counterStore = useCounterStore();
// 使用 $subscribe 订阅状态变化。state：变化后的数据
const unsubscribe = counterStore.$subscribe((mutation, state) => {
console.log('State changed:', state);
console.log('Mutation:', mutation);
});
// 直接使用 actions
const { increment, decrement } = counterStore;
// 使用 storeToRefs 将状态和计算属性转换为 refs
const { count, doubleCount } = storeToRefs(counterStore);
</script>
补充：本地化存储数据
//将数据保存到浏览器
localStorage.setItem("key",JSON.stringify(obj));
//为list赋值，若浏览器有缓存数据，则取出并赋值。否则赋值为空数组
list:JSON.parse(localStorage.getItem('key') as string) ||[]
// 删除键为 'username' 的值
localStorage.removeItem('username');
// 清空 Local Storage 中的所有数据
localStorage.clear();
结语
本篇内容主要是记录vue项目中的状态管理库Pinia的相关内容，希望能通过记录，累积知识。
编程是一场思维的马拉松，而不是短跑。相信大家都听过一句话，“种一棵树最好的时间是十年前，其次是现在”，望与诸君共勉
标签：count,vue,const,storeToRefs,counter,笔记,Pinia,store From： https://blog.csdn.net/weixin_43915285/article/details/143692038