VUE新一代状态管理插件Pinia
发表于:2022-12-28 08:44:42浏览:349次
Pinia意为菠萝,表示与菠萝一样,由很多小块组成。在pinia中,每个store都是单独存在,一同进行状态管理。
很多人也将pinia称为vuex5,因为pinia将作为vue3推荐的状态管理库,而vuex将不再迭代。
pinia它和vuex有很多相似的地方。本质上他是vuex团队核心成员开发的,在vuex上面提出了一些改进。与vuex相比,pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法(在vuex的开发计划中也将会除去同步和异步的区分)。其次相比于vuex,pinia对于typescript的支持性更好,友好的devTools支持,pinia只有1kb,简化了很多方法的写法。由于vuex比较完善,因此,pinia更加适合小型项目,vuex更加适合大型项目。
Pinia 的优点
简便,存储和组件变得很类似,你可以轻松写出优雅的存储。
类型安全,通过类型推断,可以提供自动完成的功能。
vue devtools 支持,可以方便进行调试。
Pinia 支持扩展,可以非常方便地通过本地存储,事物等进行扩展。
模块化设计,通过构建多个存储模块,可以让程序自动拆分它们。
非常轻巧,只有大约 1kb 的大小。
服务器端渲染支持。
用例:
1、基本配置和使用
//利用vue-cli创建一个pinia项目(这里选择创建vue3项目)
vue create pinia
//在项目中安装pinia
npm install pinia@next
2、项目中导入pinia
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
3、配置状态管理专用文件,在根目录下创建一个store文件,并新建一个index.js文件
import {defineStore} from 'pinia';
export const userTestStore = defineStore({//需要注意的是,defineStore返回的是一个回调方法
id:'test',//test是该状态管理的唯一标志也可以使用defineStore(id,{});的形式
state(){
return {
name:'hello pinia',
age:20
}
},
getters:{
testGetters(){
return this.name+'...';//直接利用this便能够获取到里面的内容不需要使用state中间对象
}
},
actions:()=>{
addAge:function(){
setInterval(()=>{
this.age++;
},1000)
}
}
})
推荐文章
- 微信小程序wx.scanCode,扫描二维码或者条形码获取数据
- PHP8出来也已经有一段时间了 说说PHP8的新特性
- 2021年轻人熬夜报告:你每天熬夜都在干什么?
- 利用微软的Office Online实现Office文档在线预览功能
- 82个常规的前端JavaScript方法封装(21~30)
- 前端开发者必须掌握的数据可视化技术
- 最新PHP 7.4.32, PHP8.0.24 & PHP8.1.11三个分支发布了新版本
- 如何在gitee上提交Pull Request,给他人的项目贡献自己的代码
- 微信淘宝实现互通?有关部门开始要求即时通信软件解除屏蔽网址链接,公平竞争
- Unicode 14.0标准版本发布,新增 838 个字符,共计达 144697 个字符