站酷网素材图库免费下载多作者wordpress插件
Pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具。
Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，Pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将Pinia比作为vue3的vuex。 很多人也将Pinia称为vuex5。
在Pinia中，每个store都是单独存在，一同进行状态管理。
一：pinia与vuex的区别
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
1.mutations 不再存在。
2.无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
3.不再需要注入、导入函数、调用函数、享受自动完成功能！
4.无需动态添加 Store，默认情况下它们都是动态的
5.不再有 modules 的嵌套结构
二：基本配置和使用
1、安装
可以用自己常用的包管理器安装，例如：
pnpm install pinia yarn add pinia npm install --save pinia2、 基本使用
①：创建pinia实例并挂载
在main.ts中：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引用
import {createPinia } from 'pinia'
// 创建Pinia实例
const Pinia = createPinia()
// 挂载pinia
createApp(App).use(Pinia).mount('#app')②： 配置状态管理专用文件，在根目录下创建一个store文件，并新建一个index.ts文件
③：通过import将下载好的pinia引入到index.ts中并导出 并使用defineStore创建store对象
import { defineStore } from 'pinia'//
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {})三：pinia基础特性
1、state
创建stateimport { defineStore } from 'pinia'// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {state:()=>{//创建状态return {text:"我是pinia的一个状态变量"}}
})组件中使用<template><div><!-- 3.使用 -->我是测试pinia的组件--{{store.text}}</div>
</template><script lang="ts" setup>
// 1.引用
import 名字 from "你pinia编写的文件"
// 2.创建
let store=名字()
</script><style></style>
（1）默认情况下，通过 store 实例访问 state，可以直接读取和写入，
如：@click="store.count++"
（2）通过 store.$reset() 方法可以将 state 重置为初始值。
（3）除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改。
（4）可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的组件，当组件卸载时，它们将自动删除，也可以配置将其保留。
2、getters
（1）Getters 属性的值是一个函数，接受 state 为第一个参数，目的是鼓励使用箭头函数。 （2）非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型。
import { defineStore } from 'pinia'export const useStoreb = defineStore('mainb', {state:()=>{return {text:"abcdefg"}},actions:{},getters:{newtext(){ return this.text.toUpperCase()}}
})3、actions--修改
修改方式一： 组件内创建触发。
① store.你在pinia中actions中创建的修改函数
<template><div> 我是测试pinia的组件--{{store.text}}<button @click="update()">点我修改</button></div>
</template><script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()let update=()=>{// 调用修改方法 store.你在pinia中actions中创建的修改函数store.TEXT_UPDATE()
}
</script><style></style>② pinia中创建修改方法
import { defineStore } from 'pinia'export const useStore = defineStore('main', {state:()=>{return {text:"我是pinia的一个状态变量"}},actions:{TEXT_UPDATE(){//修改方法this.text="我变了"}}
})修改方式二：$patch
//在组件内调用$parch 便可直接修改数据
let update=()=>{store.$patch({//你要修改state的数据: 你要修改的value值text:"我是$patch直接修改"})
}//方式2
let update=()=>{store.$patch((state)=>{console.log(state)state.text="你又被改了"})
}store是一个对象，在数据很多的情况下，那么我们可以使用解构。但是使用解构之后，数据会失去响应式，这个时候我们可以使用 storeToRefs来保持数据的响应式。
<template><div>我是测试pinia的组件--{{text}}<button @click="update()">点我修改</button></div>
</template><script lang="ts" setup>
import {useStore} from "../store/index"
import {storeToRefs} from "pinia"
let store=useStore()// 解构取值
// let {text}=store
// storeToRefs 让数据快去取出 并且不丢失响应式
let {text}=storeToRefs(store)
let update=()=>{// 调用修改方法 store.你在pinia中actions中创建的修改函数store.updatetext()
}
</script>
4、action--处理异步操作
在pinia中acition不但能处理同步操作 同样也可以处理异步操作
使用方式和vuex一致
在组件中：
<template><div> 我是测试pinia的组件--{{store.text}}<button @click="demoAxios()">点我获取异步数据</button> </div>
</template><script lang="ts" setup>import {useStore} from "../store/index"
let store=useStore()let demoAxios=()=>{store.link()
}</script>在pinia中：
import { defineStore } from 'pinia'
import $http from "axios"
export const useStore = defineStore('main', {state:()=>{return {text:"我是pinia的一个状态变量"}},actions:{async link(){try {let data= await $http({url:"",method:"get"})//需要的操作} catch (error) {console.log("失败")}}}
})5、$reset--重置数据
意思就是让数据恢复为state的初始值
<template><div> 我是测试pinia的组件--{{store.text}}<button @click="update()">点我修改</button><button @click="reset()">点我恢复初始值</button> </div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let update=()=>{store.updatetext()
}
let reset=()=>{// $resetstore.$reset()
}
</script>
6、$subscribe--监听数据修改
$subscribe 监听pinia数据修改 当数据改变了 那么subscribe也会触发
<template><div> 我是测试pinia的组件--{{store.text}}<button @click="update()">点我修改</button> </div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let update=()=>{store.updatetext()
}
// 监听store数据修改
let sub=store.$subscribe((params,state)=>{console.log("params",params);//修改的操作console.log("state",state);//修改后的数据
})
</script>7、模块化
pinia中取消了modules。
pinia中定义模块，只需要定义多个store即可。
因为pinia没有单一数据源这个概念，在其中可以定义多个store对象
<template><div><h1> 第一个store：{{storeone.text}}</h1><h1> 第二个store：{{storetwo.text}}</h1> </div>
</template><script lang="ts" setup>
// 引用第一个store
import {useStore} from "../store/index"
// 引用第2个store
import {useStoreb} from "../store/indexb"
let storeone=useStore()let storetwo=useStoreb()
</script>四：pinia优势
综上，pinia的优点已经很明显了
- ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉了
- pinia只具备以下几个属性，状态、计算属性、动作
- pinia大小也会更小巧一些