目录
1.引入Pinia插件
2.创建store实例,并引入main.js文件中
3.创建一个存储模块
4.使用存储模板的数据
5.刷新页面数据丢失问题
前言
学习pinia的模块化管理,通过构建多个存储模块,可以让程序自动拆分它们,非常轻巧,轻松写出优雅的存储。
一、引入Pinia插件
npm install pinia
二、创建store实例,并引入main.js
文件中
2.1.在根目录下创建store
文件夹
新建index.js
文件,代码如下
import { createPinia } from "pinia";
//创建store实例
const store = createPinia();
export default store;
2.2.将store实例引入main.js
文件
....省略
//引入store
import store from "./store/index"
//挂载到App上
createApp(App)......use(store).mount("#app")
三,创建一个存储模块
在新建的store
文件夹中新建文件userInfo
,用来存储某个项目的用户信息,代码如下
import {defineStore} from "pinia";
export const userStore = defineStore({
id:"userInfo", //命名,唯一
state:()=>{
return {
info:{
username:"Jay",
password:"123456"
}
}
}
})
这样一个存储模块就完成了,接下来就是使用了
四,使用存储模板的数据
在你要使用的文件中
//引入userStore
import {userStore } from "../store/userInfo";
//获取store
const store = userStore();
//打印
console.log(store.info.username);
console.log(store.info.password);
//更改
store.$state = {
userInfo: {
username: "Hay",
password: "345678",
}
}
五,刷新页面数据丢失问题
问题描述:当使用
pinia
存储数据后,刷新页面,数据就丢失了
5.1安装持久化插件
npm i pinia-plugin-persistedstate
5.2.1全局持久化
store文件夹下index.js
文件引入
import { createPinia } from "pinia";
//引入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
//创建store实例
const store = createPinia();
//使用持久化插件
store.use(piniaPluginPersistedstate)
export default store;
5.2.2单个模块持久化
在需要持久化的模块文件下添加persist
配置(如果是在index.js
文件添加则变成全局持久化)
import {defineStore} from "pinia";
export const userStore = defineStore({
id:"userInfo", //命名,唯一
state:()=>{
return {
firstName: 'S',
lastName: 'L',
}
},
//添加如下配置
persist: {
{
paths: ['firstName'],//firstName使用localStorage保存
storage: localStorage,
},
{
paths: ['lastName'],//lastName使用sessionStorage保存
storage: sessionStorage,
},
}
})
其它用法可参考插件代码库pinia-plugin-persistedstate
总结
更多API使用见官方文档Pinia