Vue3基础之pina + pinia-plugin-persist

1.简述

在学习vue3的过程中遇到了pina，发现此组件非常好用，还可以结合插件pinia-plugin-persist进行持久化存储，那么今天我就把这两个插件如何在项目中使用做一下笔记。

2.1.安装Pina

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

安装

npm install pinia -D

新建项目目录结构

1685948325570.png

store 是存放所有状态的文件夹,index.js 是store配置js文件。

user是模块化，在真实项目中按模块化进行区分，index.js 是模块化具体实现。

2.2. store中index.js 配置

import { createPinia } from 'pinia' 
const store = createPinia()
export default store

2.3.main.js 配置

import { createApp } from 'vue' 
import App from './App.vue'
import store from './store'
const app = createApp(App);
app.use(store); // 挂载pina
app.mount('#app');

2.4.pina使用

新建模块user那么index.js 内容是以下
inddex.js中的persist 是什么呢，我们后边继续讲
目前我们只有state，getters，actions

import { defineStore } from 'pinia'
 
export const user = defineStore({
  id: 'user',
  state:()=>{
    return {
        token:0
    }
  },
  getters:{
     getToken:(state)=>{
        return  state.token+1
     }
  },
  actions:{
    onchangeName(val){
        this.token = val;
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'my_user',
        storage: localStorage,
      }
    ]
  }
})

2.5.vue3 使用

引入user模块
引入storeToRefs将某数据转为动态绑定的数据
实例化user对象 store，借此使用什么可以点的方式调用什么


<script setup>  
  import { user} from '../store/user'
  import { storeToRefs } from 'pinia'
  
  const store = user();
  let { token } = storeToRefs(store);
  token.value = 123
  console.log(token.value); 
  const btn = ()=>{
    store.onchangeName(456)
  }
  const btnGet = ()=>{
    console.log('store.getToken()',store.getToken)
  }
</script>

3 . pinia-plugin-persist 安装

在某些特定场景下，我们需要将store的数据存储到sessionStorage 或者 localStorage中进行状态保持，那么 pinia-plugin-persist是对pina的插件，可以进行特定字段存储或者整个store存储。
store的index.js 中增加配置


import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
 
const store = createPinia()
store.use(piniaPluginPersist)
 
export default store

对各个模块的persist配置

persist:{
key:'',
storeage:'',
paths:''
}

1685950523953.png

安装

 npm install pinia-plugin-persist -D

3.1 .存储整个store

persist: {
enabled: true , // 这个配置代表存储生效，而且是整个store都存储
}

3.2.指定字段存储且及存储方式

persist: {
enabled: true,
strategies: [
{ storage: sessionStorage, paths: ['firstName', 'lastName'] }, // firstName 和 lastName字段用sessionStorage存储
{ storage: localStorage, paths: ['accessToken'] }, // accessToken字段用 localstorage存储
],
}