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 船舰一个新的 store
import { 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 自动生成id
const 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 自动生成id
const 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.ts
import { 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
// })
// 第三种修改方式 利用 actions
personStore.increment(n.value)
}
// 减
const changeSum2 = () => {
personStore.sum -= n.value;
}
</script>