Pinia 是 Vue 的存储库,可以跨组件/页面全局共享，数据是存储在缓存中。
1、安装
npm install pinia
2、注册
在main.js中注册pinia
// 注册pinia
import { createPinia } from 'pinia'
app.use(createPinia())
3、定义pinia (创建pinia.j文件)
//引入pinia
import { defineStore } from 'pinia'
//导入路由，因为下面有退出到登录的方法
import router from '../router/index.js'
<!--说明：userStore 是唯一的第一个参数，可任意定义名称 -->
export default defineStore('userStore',{
// 定义数据
state(){
return{
name:'小可爱',
age:18
}
},
// 定义计算属性
getters:{
desc(state){
return '我的名字是：'+state.name+','+'我的年龄：'+state.age
}
},
actions:{
logout(){
window.sessionStorage.removeItem('username')
window.sessionStorage.removeItem('token')
router.push({name:'login'})
}
}
})
mport {userStore} from '../store/pinia.js'
import {mapState} from 'pinia'
export default{
computed:{
// 将pinia中定义的全局数据映射到当前组件的计算属性
...mapState(userStore,['name','age','desc'])
}
}
4、在组件中使用
先导入映射的函数
import {mapActions} from 'pinia'
import {userStore} from '../XXX/pinia.js' //上面定义的pinia.js文件路径
export default{
<!--将pinia中定义的全局数据映射到当前组件的计算属性 -->
computed:{
...mapState(userStore,['name','age','desc'])
},
<!--将方法定义在methiods中，如下面的退出登录方法，前提是 已经在pinia.js文件中定义过了 -->
methods: {
// 退出登录
...mapActions(userStore,['logout'])
}
---Pinia 和 浏览器自带存储的区别
1、Pinia 是 Vue 的存储库,可以跨组件/页面全局共享，数据是存储在缓存中。
优点:读写更快,可以保存任意的js类型数据或对象.
2、浏览器自带的数据存储方法:
window.sessionStorage: 会话级别的存储，会话窗口关闭会自动清除
window.localStorage: 持久存储，除非手动清除，否则永久保存在浏览器本地，只能往里面存储字符串和数值.
--end--