Pinia.js状态管理器上手使用指南
前言
Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。
Pinia.js 有如下特点:
- 完整的 typescript 的支持;
- 足够轻量,压缩后的体积只有1.6kb;
- 去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点);
- actions 支持同步和异步;
- 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割;
- 无需手动添加 store,store 一旦创建便会自动添加;
安装
npm install pinia --save
创建 Store
新建 src/store 目录并在其下面创建 index.ts,导出 store
// src/store/index.ts import { createPinia } from 'pinia' const store = createPinia() export default store
在 main.ts 中引入并使用。
// src/main.ts import { createApp } from 'vue' import App from './App.vue' import store from './store' const app = createApp(App) app.use(store)
State
定义State
在 src/store 下面创建一个user.ts
//src/store/user.ts import { defineStore } from 'pinia' export const useUserStore = defineStore({ id: 'user', // id必填,且需要唯一 state: () => { return { name: '张三' } } })
获取 state
<template> <div>{{ userStore.name }}</div> </template> <script lang="ts" setup> import { useUserStore } from '@/store/user' const userStore = useUserStore() </script>
也可以结合 computed 获取。
const name = computed(() => userStore.name)
state 也可以使用解构,但使用解构会使其失去响应式,这时候可以用 pinia 的 storeToRefs。
import { storeToRefs } from 'pinia' const { name } = storeToRefs(userStore)
修改 state
可以像下面这样直接修改 state
userStore.name = '李四'
但一般不建议这么做,建议通过 actions 去修改 state,action 里可以直接通过 this 访问。
export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, actions: { updateName(name) { this.name = name } } })
<script lang="ts" setup> import { useUserStore } from '@/store/user' const userStore = useUserStore() userStore.updateName('李四') </script>
Getters
export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, getters: { fullName: (state) => { return state.name + '丰' } } })
userStore.fullName // 张三丰
Actions
异步 action
action 可以像写一个简单的函数一样支持 async/await 的语法,让你愉快的应付异步处理的场景。
export const useUserStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) return data } } })
action 间相互调用
action 间的相互调用,直接用 this 访问即可。
export const useUserStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) this.setData(data) // 调用另一个 action 的方法 return data }, setData(data) { console.log(data) } } })
在 action 里调用其他 store 里的 action 也比较简单,引入对应的 store 后即可访问其内部的方法了。
// src/store/user.ts import { useAppStore } from './app' export const useUserStore = defineStore({ id: 'user', actions: { async login(account, pwd) { const { data } = await api.login(account, pwd) const appStore = useAppStore() appStore.setData(data) // 调用 app store 里的 action 方法 return data } } })
// src/store/app.ts export const useAppStore = defineStore({ id: 'app', actions: { setData(data) { console.log(data) } } })
数据持久化
插件 pinia-plugin-persist 可以辅助实现数据持久化功能。
安装
npm i pinia-plugin-persist --save
使用
// src/store/index.ts import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const store = createPinia() store.use(piniaPluginPersist) export default store
接着在对应的 store 里开启 persist 即可。
export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, // 开启数据缓存 persist: { enabled: true } })
数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。
自定义 key
你也可以在 strategies 里自定义 key 值,并将存放位置由 sessionStorage 改为 localStorage。
persist: { enabled: true, strategies: [ { key: 'my_user', storage: localStorage, } ] }
持久化部分 state
默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。
state: () => { return { name: '张三', age: 18, gender: '男' } }, persist: { enabled: true, strategies: [ { storage: localStorage, paths: ['name', 'age'] } ] }
上面我们只持久化 name 和 age,并将其改为localStorage, 而 gender 不会被持久化,如果其状态发送更改,页面刷新时将会丢失,重新回到初始状态,而 name 和 age 则不会。
最后
以上就是关于 Pinia.js 用法的一些介绍,Pinia.js 的内容还远不止这些,更多内容及使用有待大家自己探索。Pinia文档
以上就是Pinia.js状态管理器上手使用指南的详细内容,更多关于Pinia.js状态管理器的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7049196967770980389
相关文章
- 简单的php获取linux服务器状态的代码,不多说-直接上函数:复制代码 代码如下:function get_used_status(){ $fp = popen('top -b -n 2 | grep -E "^(Cpu|Mem|Tasks)"',"r");//获取某一时刻系统cpu和内存使用情况 $rs =...2014-05-31
- 这篇文章主要介绍了教你如何监控 Java 线程池运行状态的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-27
- 这篇文章主要介绍了详解bash中的退出状态机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-11
- 这篇文章主要介绍了C#判断本地文件是否处于打开状态的方法,涉及C#操作文件的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
帝国CMS灵动标签调用当前父栏目下所有子栏目-支持选中状态/高亮
帝国CMS实现灵动标签调用当前父栏目下所有子栏目-支持选中状态及当前栏目高亮,支持栏目自定义排序。最适用于内容模板,显示父栏目下的子栏目。 支持静态栏目页与动态栏目页 代...2016-05-19- 本篇文章介绍了,基于ios中的流状态的定义分析。需要的朋友参考下...2020-04-25
- 这篇文章主要介绍了Vue页面堆栈管理器...2021-10-23
- 这篇文章主要介绍了c#中禁用windows的任务管理器的方法,通过注册表实现禁用,需要的朋友可以参考下...2020-06-25
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下...2017-01-09- 今天给大家分享Spring Boot 项目脚本(启动、停止、重启、状态),通过示例代码给大家介绍的非常详细,需要的朋友参考下吧...2021-06-26
- 有时我们要不停的判断网络的连接状态,比如服务器网络连接是否正常等,下面就简单介绍我的判断方法...2020-06-25
- mongodb有db.serverStatus()命令,可以查看mongodb的运行状态,那么zabbix就可以调用这个命令实现mongodb的监控。这篇文章主要介绍了Zabbix3.4监控mongodb状态的方法,需要的朋友可以参考下...2021-05-07
- php教程 用户注册并且设置为己登录状态实现方法,下面实例讲述了如何把表单提交的数据保存到mysql教程数据库教程,而没有实现用户注册后自动登录的功能,而实例二就实现了...2016-11-25
- 这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14
- 开发中有时会遇到要对文件进行共享状态的读写操作,代码如下,需要的朋友可以参考下...2020-06-25
- 本文主要介绍了如何感知线程状态、如何停止一个线程、线程之间的Event用法...2021-06-16
- Nginx 可以持续测试您的上游服务器,避免出现故障的服务器,并将恢复的服务器优雅地添加到负载均衡组中。这篇文章主要介绍了Nginx 被动检查服务器的存活状态,需要的朋友可以参考下...2021-10-09
帝国CMS在JS调用登陆状态模板中调用显示会员收到的短消息数
1、在$mhavelogin=1;代码下面加上$user=islogin();2、在//数据下加上$msgcount=$empire->gettotal("select count(*) as total from phome_enewsqmsg where to_username=&...2016-01-27- PHP服务器状态监控对于很多朋友来讲都没做,只有看到网站挂了才知道,这种半夜网站关了是不知道情况了,对于网站也非常不好,下面我们来看看小编整理的一段服务器状态监控程...2016-11-25
- 这篇文章主要给大家介绍了关于C#事件管理器如何清空所有监听的相关资料,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-11-03