Vue3基础之pina + pinia-plugin-pers

1.简述

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

2.1.安装Pina

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

• 安装

npm install pinia -D

• 新建项目目录结构

  
  1685948325570.png

1. store 是存放所有状态的文件夹,index.js 是store配置js文件。
2. 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 使用

1. 引入user模块
2. 引入storeToRefs将某数据转为动态绑定的数据
3. 实例化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存储
],
}