一 Pinia 概述
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。和Vuex相比，Pinia有很多的优势：
-
mutations不再存在
-
更友好的TypeScript支持，Vuex之前对TS的支持很不友好
-
不再有modules的嵌套结构，可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的
二 Pinia安装
安装pinia
npm install pinia配置pinia
新建store文件夹，在此文件夹下新建一个index.js
mport {defineStore} from "pinia"
export const useUsersStore=defineStore("main",{
})在main.js中use
import {createPinia} from "pinia"
import App from './App.vue'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')三 pinia使用详解
Store有三个核心概念： state、getters、actions，等同于组件的data、computed、methods。
store文件夹下index.js中代码如下
import {defineStore} from "pinia"
export const useUsersStore=defineStore("main",{
state:()=>{
return{
username:"helloworld",
}
}
})state
<script setup>
import {useUsersStore} from "./store/index"
import {storeToRefs} from "pinia"
const userStore=useUsersStore()
// const username=userStore.username //直接获取
// const {username}=userStore //解构
// const {username}=storeToRefs(userStore) //使用storeToRefs方法在解构后具有响应性
</script>
<template>
<div>
{{userStore.username}}
</div>
</template>这里const username=userStore.username 和const {username}=userStore 获得的username常量不具有响应性，要想具备响应性可以使用storeToRefs方法或者直接在template中使用store实例.属性。Pinia中可以直接使用store实例去修改state中的数据。
可以通过调用 store 上的 $reset() 方法将状态重置到其初始值
store.$reset()可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改
store.$patch({
counter: store.counter + 1,
name: 'Abalam',
})可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态
store.$state = { counter: 666, name: 'Paimon' }getters
getters: {
// 自动将返回类型推断为数字
doubleCount(state) {
return state.counter * 2
},
// 返回类型必须明确设置
doublePlusOne(): number {
return this.counter * 2 + 1
},
},访问其它getter
doubleCountPlusOne() {
return this.doubleCount + 1
},将参数传递给 getter
Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是可以从 getter 返回一个函数以接受任何参数：
doubleCountPlusOne(state) {
return (id:number)=>state.count+id
},actions的使用
actions 相当于组件中的 methods。可以使用defineStore()中的actions属性定义，并且它们非常适合定义一些业务逻辑。和getters一样，在action中可以通过this访问整个store实例的所有操作。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197052.html
