pinia简介和setup语法糖
1.pinia的基本特点
pinia同样是一个Vue 状态管理工具,它和vuex有很多相似的地方。本质上他是vuex团队核心成员开发的,在vuex上面提出了一些改进。与vuex相比,pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法(在vuex的开发计划中也将会除去同步和异步的区分)。其次相比于vuex,pinia对于typescript的支持性更好,友好的devTools支持,pinia只有1kb,简化了很多方法的写法。由于vuex比较完善,因此,pinia更加适合小型项目,vuex更加适合大型项目。
2.基本配置和使用
//利用vue-cli创建一个pinia项目(这里选择创建vue3项目)
vue create pinia
//在项目中安装pinia
npm install pinia@next
项目中导入pinia
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
createApp(App).use(createPinia()).mount('#app')
配置状态管理专用文件,在根目录下创建一个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)
}
}
})
在组件中引用状态管理变量
从上图可以看出,获取参数的方法被简化了。
3.pinia传参与调用
下面给出调用store里面的带参方法例子:
//在状态管理工具中定义addAge函数
actions:{
addAge(gap){
this.age+=gap;
}
}
//组件中导入对应状态管理工具
import { userTestStore } fr