我们已经搭建好了pinia的环境，现在我们使用pinia来存储和读取数据。Pinia是Vue的状态管理库，允许在Vue组件之间共享状态。
vue的pinia环境搭建
创建一个store文件，包含count.ts和lovetalk.ts，存储数据
import { defineStore } from "pinia";export const usecountstore=defineStore('Count',{//真正存储数据的地方state(){return{sum:6}}
})import { defineStore } from "pinia";
import { reactive } from "vue";export const usetalkstore=defineStore('talk',{//真正存储数据的地方state(){return{talklist:[ {id:'01',title:'你今天有点怪,怪好看'}, {id:'02',title:'草莓,蓝莓，今天想我没'}, {id:'03',title:'心理给你留了一块地，我的死心塌地'}, {id:'04',title:'你好,可以问条路么，通往你心里的路怎么走'} ]}}
})在vue文件中读取store数据
// 导入usecountstore函数，用于获取和设置求和数据
import { usecountstore } from '../store/count';
// 使用usecountstore函数获取countstore对象，用于存储和操作求和数据 const countstore = usecountstore();
// 导入usetalkstore函数，用于获取和设置情话列表数据 import { usetalkstore } from '../store/lovetalk'; // 使用reactive函数创建一个响应式的数据对象，并初始化为usetalkstore函数返回的数据 const talk = reactive(usetalkstore()); 还是可以正常显示，读取pinia的数据：
通过vue插件可以看到实现pinia存储数据
通过控制台可以看到我们为组件安装了这两个store文件
pinia修改数据;
pinia是符合直觉的vue.js状态管理库，支持拿到数据直接改
function add() { // 定义一个add方法，用于将用户选择的数字加到当前求和的结果上 countstore.sum+= n.value; // 将n的值加到count的值上，并更新count的值 } pinia修改数据的三种方法：
1、直接 通过const countstore = usecountstore(); 拿到的数据就改，实现方便，维护比较麻烦。
// 第一种修改方法，实现简单countstore.sum+= n.value; countstore.school='哔哩哔哩大学',countstore.tel='1237238932' 2、通过countstore的$patch方法实现批量修改
// //第二种修改方法 批量数据变更countstore.$patch({sum:98,school:'哔哩哔哩大学',tel:'1237238932'})3、通过countstore的actions去修改，要在存放数据的.ts文件里面实现actions里面的方法，然后在组件中调用。适合模块化开发，代码复用。这里我只写了sum修改的方法。
//actions 里面放置的是一个一个的方法，响应组件的动作actions:{set(value){this.sum+=value,this.school='哔哩哔哩大学',this.tel='1237238932'}} //第三种修改方法,模块化开发代码复用用第三种，后期维护方便countstore.set(n.value)storeToRefs：使替换变量仍然是响应式数据
只关注store里面的数据，如果用toRefs则countstore所有的东西都变成Ref对象
import { storeToRefs } from 'pinia';
//storeToRefs只会关注store里面的数据const {sum,school,tel}=storeToRefs(countstore)
通过这样之后：模板代码可以简写
<h2>当前求和为:{{sum}}</h2> <h2>学校:{{ school}}</h2><h2>tel:{{ tel }}</h2>而不用这样：
<h2>当前求和为:{{countstore.sum}}</h2> <h2>学校:{{ countstore.school}}</h2><h2>tel:{{ countstore.tel }}</h2>getters：（相当于可共享的计算属性）
getters:{//可共享的计算属性bigSum(state){return state.sum*10},toUpper(state){return state.school.toUpperCase()}} const {sum,school,tel,bigSum,toUpper}=storeToRefs(countstore)$subscribe，和watch有点像，监听状态变化
//和监视器watch有点像talk.$subscribe((mutate,state)=>{console.log('talklist里面保存的数据发生了改变',mutate,state)localStorage.setItem('talkList',JSON.stringify(state.talklist))})
state(){return{// talklist:[ // {id:'01',title:'你今天有点怪,怪好看'}, // {id:'02',title:'草莓,蓝莓，今天想我没'}, // {id:'03',title:'心理给你留了一块地，我的死心塌地'}, // {id:'04',title:'你好,可以问条路么，通往你心里的路怎么走'} // ]talkList:JSON.parse(localStorage.getItem('talkList') as string)||[]}}在 Vue.js 和 Pinia 中，$subscribe 和 watch 都是用来监听状态变化的，但它们在使用方式和上下文中有一些不同。
watch：
watch 是 Vue.js 的一个内置指令，也可以在 Pinia 中使用。
它用于观察一个表达式的值的变化，并在发生变化时执行回调。
watch 可以观察 Vue 实例上的数据变动，也可以观察普通的 JavaScript 对象。
当被侦听的数据变化时，watch 回调会被执行。$subscribe：
$subscribe 通常不是 Vue 或 Pinia 的内置方法，而是被一些第三方库或自定义代码所使用。
它用于订阅状态管理库中的特定事件或变化。
$subscribe 通常需要一个回调函数作为参数，当状态变化发生时，这个回调函数会被调用。
$subscribe 通常用于更细粒度的状态管理，比如订阅特定的状态更新而不是整个数据对象的变化。
代码：
选项式：
lovetalk.ts
import axios from "axios";
import { nanoid } from "nanoid";
import { defineStore } from "pinia";
import { json } from "stream/consumers";
import { reactive } from "vue";export const usetalkstore=defineStore('talk',{actions:{async getATalk() { // 向指定的URL发送GET请求，并使用连续解构赋值和重命名获取返回的内容中的标题字段 let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json'); // 创建一个新的对象，包含一个唯一的ID和一个标题，并把这个对象包装成一个字符串格式的文本数据 let obj = { id: nanoid(), title }; // 把新创建的对象添加到talklist数组的开头位置（这里缺少了将obj添加到talk.talklist的代码） this.talkList.unshift(obj)} },//真正存储数据的地方state(){return{// talklist:[ // {id:'01',title:'你今天有点怪,怪好看'}, // {id:'02',title:'草莓,蓝莓，今天想我没'}, // {id:'03',title:'心理给你留了一块地，我的死心塌地'}, // {id:'04',title:'你好,可以问条路么，通往你心里的路怎么走'} // ]talkList:JSON.parse(localStorage.getItem('talkList') as string)||[]}}
})count.ts
import { defineStore } from "pinia";
import { start } from "repl";export const usecountstore=defineStore('Count',{//actions 里面放置的是一个一个的方法，响应组件的动作actions:{set(value){this.sum+=value,this.school='哔哩哔哩大学',this.tel='1237238932'}},//真正存储数据的地方state(){return{sum:6,school:'湖南某高校xml',tel:'17837483xx',}},getters:{//可共享的计算属性bigSum(state){return state.sum*10},toUpper(state){return state.school.toUpperCase()}}
})组合式：
lovetalk.ts:
import axios from "axios";
import { nanoid } from "nanoid";
import { defineStore } from "pinia";
import { json } from "stream/consumers";
import { reactive } from "vue";export const usetalkstore=defineStore('talk',()=>{//talkList就是stateconst talkList=reactive(JSON.parse(localStorage.getItem('talkList') as string)||[])//getATalk就是actionsasync function getATalk() { // 向指定的URL发送GET请求，并使用连续解构赋值和重命名获取返回的内容中的标题字段 let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json'); // 创建一个新的对象，包含一个唯一的ID和一个标题，并把这个对象包装成一个字符串格式的文本数据 let obj = { id: nanoid(), title }; // 把新创建的对象添加到talklist数组的开头位置（这里缺少了将obj添加到talk.talklist的代码） talkList.unshift(obj)} return{talkList,getATalk}})count.ts:
import { defineStore } from "pinia";
import { start } from "repl";
import { computed, ref } from "vue";export const usecountstore=defineStore('Count',()=>{const sum=ref(6)const school=ref('湖南某高校xml')const tel=ref('17837483xx')function set(value){this.sum+=value,this.school='哔哩哔哩大学',this.tel='1237238932'}return{sum,school,tel,set}
})
