阅读量:0
我们已经搭建好了pinia的环境，现在我们使用pinia来存储和读取数据。Pinia是Vue的状态管理库，允许在Vue组件之间共享状态。
创建一个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就是state const talkList=reactive(JSON.parse(localStorage.getItem('talkList') as string)||[]) //getATalk就是actions async 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} })