💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。
1. 安装
npm i pinia --save
2. pinia特点
- 完整的typescript支持
- 足够轻量,压缩后的体积只有1.6kb
- 去除mutations,只保留state,getters,actions
- actions同时支持同步和异步
- 没有modules模块的概念,只有store,store之间可以互相引用,更好的代码分割
3. 使用
1.初始化store
创建目录store/index.ts
import {
createPinia } from 'pinia'
const store = createPinia()
export default store
2.在main.ts引用store
import {
createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
3.创建store
根据功能模块在store下创建ts文件,维护各个功能的数据,如用户模块user.ts,维护两个字段:userInfo和token,通过actions里面的方法修改userInfo和token的内容
import {
defineStore } from 'pinia'
interface UserInfo {
name?: string
age?: number
}
// 第一个参数是id,id必填,且需要保证值唯一
export const useUserStore = defineStore('user', {
state: (): {
userInfo: UserInfo
token: string
} => {
return {
userInfo: {
}