当前位置：首页 > news >正文

pinia状态管理用法

news 2025/6/26 10:29:06

        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 pinia

2、基本使用

①：创建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>