位置: IT常识 - 正文

vue3+ts项目里如何使用状态管理pinia以及数据持久化(vue ts)

编辑：rootadmin

vue3+ts项目里如何使用状态管理pinia以及数据持久化

推荐整理分享vue3+ts项目里如何使用状态管理pinia以及数据持久化(vue ts)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3+ts+vite,vue3 ts知乎专栏,vue3 + ts,vue3+ts+vite,vue3 + ts,vue3 ts element,vue3+ts+vite,vue3 ts element,内容如对您有帮助，希望把文章链接给更多的朋友！

我们都知道在vue2项目里搭配状态管理vuex3XX使用，效果极好的。

虽然在vue3项目里，vuex4XX仍能发挥余热，但由于缺乏对于ts的支持，使得类型推断陷入僵局。

所以在vue3+ts的项目里，vuex渐被舍弃，pinia取而代之。（尤雨溪亦力荐之）pinia官网

下面是在vue3 + ts 项目里如何使用 pinia 步骤

这里是如何从零开始由vite构建vue3+ts项目的流程介绍

1 下载 pinia 插件

npm i pinia

2 引入和使用插件

main.ts

3 创建store/home.ts状态管理文件来管理对应页面（home.vue）

store/home.ts

// 每个状态管理文件都要引入此方法import { defineStore } from 'pinia'// 官方建议取名遵从 useXXXStore 形式// 'home' 为当前store的唯一标识类似ID // 取名建议与文件名称一致便于记忆和管理// pinia舍弃了冗长的mutations属性 // 以下是pinia的一种写法因与vuex相似便于学习和记忆export const useHomeStore = defineStore('home',{ state:()=>{ return{ num:0 } }, //state也可写成这样 // state:()=>({ // num:0 // }), actions:{ changeNum(){ //这里可以使用this去拿到state里定义的变量 this.num ++ } }, getters:{ // 这里取名不可与state里的变量一致所以取名getNum getNum:state=>state.num }})

4 在对应页面组件home.vue里使用状态管理文件home.ts

home.vue

<template> <div class="c">this is home page</div> <div class="c"> <p>使用pinia直接改变变量</p>  <p>{{ num }}</p> <button @click="changeNum">点击递增</button> </div></template><script lang="ts" setup>import { toRefs } from 'vue'// 1 引入import { useHomeStore } from "../store/home";// 2 拿到实例const homeStore = useHomeStore();// 3 解构里面的变量和方法 toRefs作用是让解构出来的变量具有响应性 const { num,changeNum } = toRefs(homeStore);</script><style scoped>.c { width: 80%; padding: 20px; margin: 0 auto; border: 1px solid red;}.c>p>span{ color:coral;}</style>

静态展示效果：

点击按钮改变变量效果：

如果像这样频繁改变变量官方建议使用 $patch 方法（官方优化加持）

具体操作如下

home.vue

<template> <div class="c">this is home page</div> <div class="c"> <p>使用pinia直接改变变量</p>  <p>{{ homeStore.num }}</p> <button @click="changeNum">点击递增</button> </div></template><script lang="ts" setup>// 1 引入import { useHomeStore } from "../store/home";// 2 拿到实例const homeStore = useHomeStore();// 频繁改变homeStore里面的变量建议使用$patch方法// 一 $patch的对象式写法// const changeNum = ()=>{// homeStore.$patch({// num: ++ homeStore.num// })// }// 二 $patch的函数式写法const changeNum = ()=>{ // 这里的state就是home.ts里的state homeStore.$patch((state)=>{ state.num ++ })}</script><style scoped>.c { width: 80%; padding: 20px; margin: 0 auto; border: 1px solid red;}.c>p>span{ color:coral;}</style>

效果：

除了以上定义变量后让变量自身变化的外我们也可以在actions里请求接口数据赋值变量

如下

home.ts

相应组件页面使用

home.vue

<template> <div class="c">this is home page</div> <div class="c"> <p>使用pinia直接改变变量</p>  <p>{{ num }}</p> <button @click="changeNum">点击递增</button> </div> <div class="c"> <button @click="changeToken">使用pinia请求数据接口赋值token</button> <p>token: <span>{{ token }}</span></p> </div></template><script lang="ts" setup>import { toRefs } from 'vue'// 1 引入import { useHomeStore } from "../store/home";// 2 拿到实例const homeStore = useHomeStore();// 3 解构里面的变量和方法 toRefs作用是让解构出来的变量具有响应性 const { num,changeNum,token,changeToken } = toRefs(homeStore);</script><style scoped>.c { width: 80%; padding: 20px; margin: 0 auto; border: 1px solid red;}.c>p>span{ color:coral;}</style>

效果：

pinia 也存在和vuex一样的弊端就是刷新页面后数据丢失

我们可以使用 pinia-plugin-persistedstate 插件来完成数据持久化

数据持久化具体步骤

1 下载插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2 main.ts引入和使用插件

main.ts

import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from './router'import elementPlus from 'element-plus'import 'element-plus/dist/index.css'// ① 引入createPinia方法从piniaimport { createPinia } from 'pinia'// ② 拿到pinia实例const pinia = createPinia()// 1 引入数据持久化插件import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'// 2 pinia使用数据持久化插件pinia.use(piniaPluginPersistedstate)const app = createApp(App)//使用piniaapp.use(router).use(elementPlus).use(pinia).mount('#app')

3 对应状态管理文件配置参数（这里以home.ts为例）

home.ts

// 每个状态管理文件都要引入此方法import { defineStore } from 'pinia'//引入接口import { httpPost } from '../request/api'// 官方建议取名遵从 useXXXStore 形式// 'home' 为当前store的唯一标识类似ID // 取名建议与文件名称一致便于记忆和管理// pinia舍弃了冗长的mutations属性 // 以下是pinia的一种写法因与vuex相似便于学习和记忆export const useHomeStore = defineStore('home',{ state:()=>{ return{ num:0, token:'' } }, //state也可写成这样 // state:()=>({ // num:0 // }), actions:{ changeNum(){ //这里可以使用this去拿到state里定义的变量下面同理 this.num ++ }, changeToken(){ // ts 实在学的不咋地这里就先any了 httpPost().then((res:any)=>{ this.token = res.data.data.token }) } }, getters:{ // 这里取名不可与state里的变量一致所以取名getNum //简写 getNum:state=>state.num, //全写 // getNum:(state)=>{ // return state.num // } getToken:state=>state.token, }, //数据持久化配置这里是当前所有变量都持久化 persist:true})

效果：

在实际项目里 token持久化是我们所不希望的那如何只让num这一变量持久化呢

进一步配置参数即可

home.ts

效果：

最后总结一下pinia一些优点

① 舍弃了冗长的 mutations 属性

② 舍弃了模块化 modules 让状态管理更加扁平化

③ 对于 ts 的支持更加友好支持数据推断

④ 你甚至可以让各个状态管理相互依赖、嵌套

以上就是我目前在学习 pinia 的一些分享了也欢迎看到这里的你一起分享学习共同进步！

本文链接地址:https://www.jiuchutong.com/zhishi/292391.html 转载请保留说明！