Vue - pinia

Pinia 是 Vue 3 的官方状态管理库，旨在替代 Vuex，提供更简单的 API 和更好的 TypeScript 支持。Pinia 的设计遵循了组合式 API 的理念，能够很好地与 Vue 3 的功能结合使用。

Pinia 的基本概念

• Store: Pinia 中的核心概念，类似于 Vuex 中的 Store。它是一个用于管理状态的中心地点。
• State: 存储的数据，可以在多个组件之间共享。
• Getters: 类似于计算属性，用于从状态派生出新的信息。
• Actions: 用于包含逻辑的方法，可以用于修改状态或处理异步操作。

步骤一：下载 pinia :

npm install pinia
// 或者
pnpm install pinia

步骤二：设置 pinia :

步骤三：创建 store 文件夹

// person.ts 船舰一个新的 storeimport { defineStore } from "pinia";export const usePersonStore = defineStore('person', {// 真正存储数据的地方state() {return {sum:20}}
})

import axios from "axios";
import { nanoid } from "nanoid";
import { defineStore } from "pinia";export const useTalkStore = defineStore('talk', {actions: {async getATalk() {// 发送请求const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象// pnpm i nanoid 自动生成idconst obj = { id: nanoid(), title: res.data.content }// 放入数组当中this.talkList.unshift(obj);}  },// 真正存储数据的地方state() {return {talkList: [{ id: '001', title: '星期一' },{ id: '002', title: '星期二' },{ id: '003', title: '星期三' },]}}
})

 

步骤四：使用 store  （存储和读取数据）

// Person.vue  使用 pinia 前<template><div class="person"><h2>当前求和为：{{sum}}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="changeSum1">加</button><button @click="changeSum2">减</button></div></template><script setup lang='ts' >
import { ref } from 'vue'const sum = ref(1);
// 选择的数字
const n = ref(1);const changeSum1 = ()=>{sum.value += n.value;
}
const changeSum2 = ()=>{sum.value -= n.value;
}</script>
<style scoped></style>

// Person.vue 使用 pinia 后
<template><div class="person"><h2>当前求和为：{{personStore.sum}}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="changeSum1">加</button><button @click="changeSum2">减</button></div></template><script setup lang='ts' >
import { ref } from 'vue'
import { usePersonStore } from '../store/person'const personStore = usePersonStore();
// 以下两种方式都可以拿到state中的数据
// console.log('@',personStore.sum);
// console.log('@@@',personStore.$state.sum);// 选择的数字
const n = ref(1);// const changeSum1 = ()=>{
// }
// const changeSum2 = ()=>{
// }</script>
<style scoped></style>

// Talk.vue 使用 pinia 前
<template><div class="talk"><button @click="getTalk">获取一句话</button><ul><li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li></ul></div>
</template><script setup lang='ts'>
import axios from 'axios';
import { nanoid } from 'nanoid';
import { reactive } from 'vue';const talkList = reactive([{ id: '001', title: '星期一' },{ id: '002', title: '星期二' },{ id: '003', title: '星期三' },]);
const getTalk = async () => {// 简单写法：连续解构赋值 + 重命名// const {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand/qinghua?format=json')// const obj = { id: nanoid(), title };// 发送请求const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象// pnpm i nanoid 自动生成idconst obj = { id: nanoid(), title: res.data.content }// 放入数组当中talkList.unshift(obj);
}
</script><style></style>

<template><div class="talk"><button @click="getTalk">获取一句话</button><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.title}}</li></ul></div>
</template><script setup lang='ts'>import { useTalkStore } from '../store/talk';
// import { storeToRefs } from 'pinia';const talkStore = useTalkStore();// const { talkList } = storeToRefs(talkStore)// 与 watch 类似
talkStore.$subscribe((mutate,state) => {console.log('talkStore 里面保存的数据发生了变化',mutate,state);})
const getTalk=() => {talkStore.getATalk();
}</script><style></style>

步骤五：修改数据（三种方式）

// person.tsimport { defineStore } from "pinia";export const usePersonStore = defineStore('person', {// 真正存储数据的地方state() {return {sum: 20,name: '8520',age:20}},// actions 里面放的是一个个方法，用于响应组件中的“动作”actions:{increment(value){console.log('increment 被调用了', value);// 修改数据（this 是当前的 store)this.sum += value;}},getters: {// 可以对数据进行加工bigSum(state) {return state.sum * 10;},// 也可以被解构 调用}
})

<template><div class="person"><h2>当前求和为：{{personStore.sum}}</h2><h2>姓名：{{personStore.name}},年龄：{{personStore.age}}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="changeSum1">加</button><button @click="changeSum2">减</button></div></template><script setup lang='ts' >
import { ref } from 'vue'
// 引入 usePersonStore
import { usePersonStore } from '../store/person'
import { storeToRefs } from 'pinia';// 使用 usePersonStore ，得到一个专门保存 person 相关的 store
const personStore = usePersonStore();// storeToRefs 只会关注 store 中的数据，不会对方法进行 ref 包裹
const { sum, name, age, bigSum } = storeToRefs(personStore)// 选择的数字
const n = ref(1);// 加
const changeSum1 = () => {// 第一种修改方式// personStore.sum += n.value;// 第二种修改方式 批量修改// personStore.$patch({//     sum: 858,//     name: '5632',//     age:55// })// 第三种修改方式 利用 actionspersonStore.increment(n.value)}
// 减
const changeSum2 = () => {personStore.sum -= n.value;
}
</script>