Vue3引入pinia并模块化

目录

1.引入Pinia插件
2.创建store实例，并引入main.js文件中
3.创建一个存储模块
4.使用存储模板的数据
5.刷新页面数据丢失问题

前言

学习pinia的模块化管理，通过构建多个存储模块，可以让程序自动拆分它们，非常轻巧，轻松写出优雅的存储。

---

一、引入Pinia插件

npm install pinia
1

二、创建store实例，并引入main.js文件中

2.1.在根目录下创建store文件夹

新建index.js文件，代码如下

import { createPinia } from "pinia";
//创建store实例
const store = createPinia();
export default store;
1
2
3
4

2.2.将store实例引入main.js文件

....省略
//引入store
import store from "./store/index"
//挂载到App上
createApp(App)......use(store).mount("#app")
1
2
3
4
5

三，创建一个存储模块

在新建的store文件夹中新建文件userInfo，用来存储某个项目的用户信息，代码如下

import {defineStore} from "pinia";
export const userStore = defineStore({
     id:"userInfo", //命名，唯一
     state:()=>{
       return {
       info:{
         username:"Jay",
         password:"123456"
         }
       }
     }
})

1
2
3
4
5
6
7
8
9
10
11
12
13

这样一个存储模块就完成了，接下来就是使用了

四，使用存储模板的数据

在你要使用的文件中

//引入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",
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

五，刷新页面数据丢失问题

问题描述：当使用pinia存储数据后，刷新页面，数据就丢失了

5.1安装持久化插件

npm i pinia-plugin-persistedstate
1

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;
1
2
3
4
5
6
7
8

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,
       },
     }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其它用法可参考插件代码库pinia-plugin-persistedstate

总结

更多API使用见官方文档Pinia