什么是Pinia
其目的是设计一个拥有组合式 API 的 Vue 状态管理库。目标用户是使用vue3的用户,但并不强制用户使用compositionAPI写法。值得一提的是,pinia的开发团队是vueX的核心开发团队,采用的是vueX5版本的设计理念,如果没有以下的问题,使用vueX也无妨
vueX的问题
- 改变值的话需要分清是同步还是异步
- vueX对ts对支持不友好,pinia原生支持
- vueX的state多的时候,需要分成module来使用,pinia是不用的
pinia特点
- 完整的ts支持
- 及其轻巧(约1kb)
- Store中的Actions配置项既可以执行同步或异步方法
- 模块不需要嵌套,可以声明多个Store
- 支持Vue Dev Tools、SSR和webpack代码拆分
使用pinia
如果使用的是vue2写法,步骤和使用vueX一样,但有些许小差别
第一步,安装pinia
# 获取最新版的pinia
npm install pinia@next
第二步,入口处挂载Pinia
// 和vueX不同的是我们引入的是pinia中的createPinia方法
// 再用该方法进行use()挂载
import { createPinia } from 'pinia'
app.use(createPinia())
第三步,在src/stores文件夹里声明store
最后,在组件中引入并使用
声明store
选项式API
import {defineStore} from 'pinia'
export const useXXXStore = defineStore('stored',
// ------------state-----------
// 标准写法
state: () => (
return {
token:'xxxxx'
}
)
// 简化写法
state: ()=>({
token:"xxxxxxxxx";
})
// ------------getters-----------
getters:{
doubleCounts(state){
return state.count * 2;
},
// 通过this来访问自己store中的其他getters
doubleCountsPlus(){
return this.doubleCounts + 1;
},
// getter 传递参数
doubleCountPlusParams(){
return plusNum => this.doubleCounts + plusNum
}
/**
* 访问其他store中的getters
* 跟vue中使用store一样,先在store中吧另外一个store
* 用import导入来成变量或者结构,然后再调用即可
* */
}
// ------------actions-----------
/**
* vueX中使用同步数据时用mutation,异步时则用Actions,
* 在pinia中异步或同步都只用Actions
*
* */
actions:{
// 1. 同步
addCount(){
this.count ++;
}
// 传参
addCount(num){
this.count += num;
}
// 2. 异步(模拟
setTimeout(()=>{
this.count += num;
},3000)
}
)
description
这两者不是竞争关系(自家人还竞争什么),是使用的场景不同,pinia轻量级,体积小,适合对小型应用,项目大的话还是vueX好,pinia也已经被官方接管了,只是目前 vueX 和 Pinia 还是两个独立的仓库,以后可能会合并,也可能独立发展,只是官方肯定推荐的是 Pinia,不过别担心,既然符合了vueX5 提案所提到的功能点,那学完pinia,到时候vueX5出来的时候也可以直接上手。
组合式API
个人喜欢的写法
import { ref, } from 'vue'
export const useCounterStore = defineStore('counter', () => {
/**
* ref() 就是 state 属性
* computed() 就是 getters
* function() 就是 actions
*/
const count = ref(0)
const increment = () => count.value++
const doubleValue = computed(() => count.value * 2),
return {
count,
increment,
doubleValue
}
})
使用store
// 方法一 不是响应式
import { storeToRefs } from 'pinia'
import { useXXXStore } from './store/main.js'
/**
* 当使用组合式API编写pinia时,ref包裹
* 再使用上面👆的方式获取,其值就是响应式了
* */
// 方法二 setup语法糖解构storeToRefs();
import { useXXXStore } from './store/main.js'
const store = useXXXStore()
store.token
store.doubleCounts
store.doubleCountPlusParams(2)
// 解构后的值是一个ref,响应式的
const {
token,
doubleCounts,
doubleCountPlusParams
} = storeToRefs(useXXXStore())
到这基本使用就没问题了,今天浅尝了一下pinia,更多请查看官方文档