Pinia简介
Pinia是Vue的专属状态库，不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。
Mutation已被弃用 ，只有 state, getter 和 action ，简化状态管理库。
Pinia的使用
基本使用
1. 安装依赖
npm install pinia
# 使用yarn
yarn add pinia
# 使用pnpm
pnpm i pinia
2. 使用Pinia插件
src/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')
3. 创建Store
Option Store
src/store/counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 1
}),
getters: {
doubleCount(): number {
return this.count * 2
},
tripleCount: state => state.count * 3
},
actions: {
increment(payload: number) {
this.count += payload
}
}
})
Setup Store
import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => {
return count.value * 2
})
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
在 Setup Store 中：
-
ref()就是state属性 -
computed()就是getters -
function()就是actions
4. 在组件中使用
src/App.vue
<script setup lang="ts">
import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
countStore.increment(2)
}
</script>
<template>
<p>{{ countStore.count }}</p>
<button @click="handleClick">修改状态</button>
</template>
修改数据的方法
1. 通过action修改
store定义actions方法
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 1
}),
actions: {
increment(payload: number) {
this.count += payload
}
}
})
在组件中调用
import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
countStore.increment(2)
}
2. 直接修改state中数据的状态
在组件中调用
import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
countStore.count += 1
}
3. 使用$patchAPI
$patch可以接受一个对象或函数
import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
countStore.$patch({ count: 2 })
}
const handleClick2 = () => {
countStore.$patch(state => (state.count += 2))
}
API
createPinia
创建一个 Pinia 实例，供应用使用。
defineStore
创建一个 useStore 函数，检索 store 实例。\
属性：
#id
store 的唯一标识符
#state
Store 的 State。给它赋值可替换整个 state。
方法：
$patch
将一个 state 补丁应用于当前状态。
// 对象
countStore.$patch({ count: 2 })
// 函数
countStore.$patch(state => (state.count += 2))
$reset
将 store 重设为初始状态。只在Option Store可用。
$subscribe
设置一个回调，当状态发生变化时被调用。返回删除侦听器的函数。
store.$subscribe((storeInfo, state) => {
console.log(storeInfo, state)
})
$onAction
设置一个回调，当一个 action 即将被调用时，就会被调用。
store.$onAction(({ after, onError }) => {
// 你可以在这里创建所有钩子之间的共享变量，
// 同时设置侦听器并清理它们。
after((resolvedValue) => {
// 可以用来清理副作用
// `resolvedValue` 是 action 返回的值，
// 如果是一个 Promise，它将是已经 resolved 的值
})
onError((error) => {
// 可以用于向上传递错误
})
})
