Pinia 核心
相比于vue2中的vuex，pinia的使用更加的简洁方便，和vue3有着非常贴切的结合。
Pinia 介绍
Pinia是一个状态管理工具，它和Vuex一样为Vue应用程序提供共享状态管理能力。- 语法和
Vue3一样，它实现状态管理有两种语法：选项式API与组合式API，我们学习组合式API语法。 - 它也支持
Vue2也支持devtools，当然它也是类型安全的，支持TypeScript
Why should I use Pinia?
回顾：
- vuex全局有几个store？ 答：1个store =>但是今天学习的pinia可以创建多个store
- vuex核心的api？ 答：state定义变量 + getters计算属性 + mutations修改变量(同步) + actions获取异步数据=> 今天学习的pinia没有这么多繁琐的api，只需要定义state和修改state的方法
- Pinia的数据流转图
- 可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。
- 管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。
小结：
- Pinia 是一个简单实用的状态管理工具，和菠萝一样
香
Pinia 的快速上手
掌握：实用Pinia使用，管理计数器的状态
使用步骤：
- 安装
yarn add pinia
# or
npm i pinia
- 导入，实例化，当做插件使用，和其他插件使用套路相同
main.ts
import { createApp } from 'vue'
+ import { createPinia } from 'pinia'
import App from './App.vue'
+ const pinia = createPinia()
const app = createApp(App)
+ app.use(pinia)
app.mount('#app')
- 创建仓库&使用仓库
stores/a.js
// 创建一个store
import { defineStore } from "pinia"
import { ref } from "vue"
export const useCounterStore = defineStore("counter", () => {
// 1. 使用ref或reactive函数定义变量和修改变量方法
//...
// 2. 返回定义的变量和修改变量方法
return {}
})
views/index.vue
<script setup lang="ts">
import { useCounterStore } from "./store/counter"
// store中有状态和函数
const store = useCounterStore()
</script>
- 进行状态管理
// state
const count = ref(100)
// getters
const doubleCount = computed(() => count.value * 2)
// mutations
const update = () => count.value++
// actions
const asyncUpdate = () => {
setTimeout(() => {
count.value++
}, 1000)
}
return { count, doubleCount, update, asyncUpdate }
<template>
APP {{ store.count }} {{ store.doubleCount }}
<button @click="store.update()">count++</button>
<button @click="store.asyncUpdate()">async update</button>
</template>
总结：
- 通过
const useXxxStore = defineStore('id',函数)创建仓库得到使用仓库的函数
| Vuex | Pinia |
|---|---|
| state | ref 和 reactive创建的响应式数据 |
| getter | computed 创建的计算属性 |
| mutations 和 actions | 普通函数，同步异步均可 |
- 使用Pinia与在组件中维护数据大体相同，这就是
Pinia的状态管理基本使用
storeToRefs的使用
掌握：使用 storeToRefs 解决解构仓库状态丢失响应式的问题
问题：
- 当我们想解构 store 提供的数据时候，发现数据是没有响应式的。
回忆：
- 在学习 vue 组合式API创建的响应式数据的时候，使用
toRefs保持结构后数据的响应式
方案：
- 使用
storeToRefs解决解构仓库状态丢失响应式的问题
代码：.0
BB
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)
小结：
- 当你想从 store 中解构对应的状态使用，需要使用
storeToRefs
