Pinia
1. Pinia介绍
What is Pinia ?
Pinia
是一个状态管理工具,他和vuex
一样为vue
应用程序提供共享状态管理能力- 语法和
Vue3
一样,它实现状态管理有两种语法:选项式API
与组合式API
,我们学习组合式API语法 - 他也支持
Vue2
也支持devtools
,当然它也是类型安全的,支持TypeScript
Why should I use Pinia?
- Pinia的数据流转图
- 可以创建多个全局仓库,不用像Vuex一个仓库嵌套模块,结构复杂
- 管理数据简单,提供数据和修改数据的逻辑即可,不像Vuex需要记忆太多API
小结:
Pinia是一个简单实用的状态管理工具,和菠萝一样
香
2. Pinia15分钟上手
使用步骤:
- 安装
yarn add pinia
# or
npm i pinia
- 导入,实例化,当做插件使用,和其他插件使用套路相同
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')
- 创建仓库&使用仓库
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
return { }
})
<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>
总结:
- 通过
count useXxxStore = definestore('id', 函数)
创建仓库得到使用仓库的函数
Vuex | Pinia |
---|---|
state | ref 和 reactive 创建的响应式数据 |
getters | computed 创建的计算属性 |
mutations 和 actions | 普通函数,同步异步均可 |
使用Pinia与在组件中维护数据大体相同,这就是
pinia
的状态管理基本使用
3. storeToRefs的使用
问题:
- 当我们想解构 store 提供的数据时候,发现数据是没有响应式的。
回忆:
- 在学习 vue 组合式API创建的响应式数据的时候,使用
toRefs
保持结构后数据的响应式
方案:
- 使用
storeToRefs
解决解构仓库状态丢失响应式的问题
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)