最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录
视频网址：
Day2-02.Pinia-counter基础使用_哔哩哔哩_bilibili
学习日记：
vue3学习日记1 - 环境搭建-CSDN博客
vue3学习日记2 - 组合式API基础学习-CSDN博客
vue3学习日记3 - 组合式API练习小案例-CSDN博客
一、Pinia概念
Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品
优点
1、提供更加简单的API（去掉了 mutation）
2、提供符合组合式风格的API（和 Vue3 新语法统一）
3、去掉了 modules 的概念，每一个 store 都是一个独立的模块
4、搭配 TypeScript 一起使用提供可靠的类型判断
二、添加Pinia到Vue项目
1、在要创建新项目的位置地址栏输入cmd
2、输入“npm init vue@latest”
3、用VsCode打开新建项目，安装依赖
4、运行项目
5、查看Pinia官方文档
Home | Pinia 中文文档 (web3doc.top)
查看安装教程
6、安装Pinia
安装成功后，会发现在package.json中有"pinia"
7、将Pinia注入程序根目录
三、Pinia的使用
下面跟着官方文档写一个小案例熟悉一下
1、创建store文件夹，并在里面创建文件counter.js
2、编写counter.js
// 1. 导入defineStore
import { defineStore } from "pinia";
import { ref } from "vue";
// export导出，可以让外部访问
export const useCounterStore = defineStore('counter',()=>{
// 定义一个变量
const count = ref(0)
// 定义一个方法修改数据
const changeCount = () => {
count.value++
}
// 返回数据
return {
count,
changeCount
}
})3、组件使用
<script setup>
// 导入useCounterStore方法
import { useCounterStore } from "@/store/counter";
// 执行方法得到counterStore对象
const counterStore = useCounterStore()
</script>
<template>
<button @click="counterStore.changeCount">{{ counterStore.count}}</button>
</template>4、运行结果
四、getters实现
Pinia中的getters直接使用computed函数进行模拟
1、编写counter.js
// 1. 导入defineStore
import { defineStore } from "pinia";
import { computed, ref } from "vue";
// export导出，可以让外部访问
export const useCounterStore = defineStore('counter',()=>{
// 定义一个变量
const count = ref(0)
// 定义一个方法修改数据
const changeCount = () => {
count.value++
}
// 定义getters
const getters = computed(() => {
return count.value*2
})
// 返回数据
return {
count,
changeCount,
getters
}
})2、App,vue
<script setup>
// 导入useCounterStore方法
import { useCounterStore } from "@/store/counter";
// 执行方法得到counterStore对象
const counterStore = useCounterStore()
</script>
<template>
<button @click="counterStore.changeCount">{{ counterStore.count}}</button>
{{ counterStore.getters }}
</template>3、运行结果
五、action如何实现异步
action中实现异步和组件中定义数据和方法的风格完全一致
1、安装axios插件
2、编写counter.js
// 1. 导入defineStore
import { defineStore } from "pinia";
import { ref } from "vue";
// 导入axios
import axios from "axios";
const url = 'http://geek.itheima.net/v1_0/channels'
// export导出，可以让外部访问
export const useCounterStore = defineStore('counter',()=>{
// 定义一个数据list
const list = ref([])
// 异步action
const loadList = async () =>{
// 将后台获取的数据赋值给res
const res = await axios.get(url)
list.value = res.data.data.channels
}
// 返回数据
return {
list,
loadList
}
})3、app.vue
<script setup>
// 导入useCounterStore方法
import { useCounterStore } from "@/store/counter";
import { onMounted } from "vue";
// 执行方法得到counterStore对象
const counterStore = useCounterStore()
// 挂载时访问接口
onMounted(()=>{
counterStore.loadList()
})
</script>
<template>
<ul>
<li v-for="item in counterStore.list" :key="item.id">{{ item.name}}</li>
</ul>
</template>4、运行结果
六、storeToRefs，实现响应式
1、直接解构赋值（响应式丢失）
// 执行方法得到counterStore对象
const counterStore = useCounterStore()
const { count , doubleCount } = counterStore2、方法包裹（保持响应式更新）
const { count , doubleCount } = storeToRefs(counterStore)注意：
const { count , doubleCount } = storeToRefs(counterStore)
只适用于数据和getter，对于修改数据的方法还是要直接从原来的counterStore中解构赋值
const { increase } = counterStore七、问题小结
1、Pinia是用来做什么的？
集中状态管理工具，可以替换vuex2、Pinia中还需要mutation吗？
不需要，只保留了action，并且action即支持同步也支持异步3、Pinia如何实现getter？
可以用computer计算属性函数4、Pinia产生的Store如何解构赋值数据保持响应
storeToRefs
注意：
const { count , doubleCount } = storeToRefs(counterStore)
只适用于数据和getter，对于修改数据的方法还是要直接从原来的counterStore中解构赋值
const { increase } = counterStore
