前言

学习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 install pinia-persistedstate-plugin

5.2.1全局持久化

store文件夹下index.js文件引入

import { createPinia } from "pinia";
//引入持久化插件
import { createPersistedState } from "pinia-persistedstate-plugin"
//创建store实例
const store = createPinia();
//使用持久化插件
store.use(createPersistedState())
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: {
         //开启持久化
         enabled: true,
         //storage默认是sessionStorage
         strategies: [
            //firstName用sessionStorage存储
            //lastName用localstorage存储
           { storage: sessionStorage, paths: ['firstName'] }, 
           { storage: localStorage, paths: ['lastName'] }, 
          ]
     }
})

总结

更多API使用见官方文档Pinia

Vue3引入pinia模块和使用持久化插件

目录

前言