vue3中pinia+持久化存储的配置与使用

• 下载pinia+pinia-plugin-persist

npm install pinia -S
npm install pinia-plugin-persist --save

• store/index.js中配置pinia与pinia-plugin-persist

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

• 将store/index.js引入到main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'
const app = createApp(App)
app.use(store)

• pinia分模块-store/user.js

import { defineStore } from 'pinia'
import {logout} from '@/utils/user.js'
export const user = defineStore('user', {
 // 为了完整类型推理，推荐使用箭头函数
 state: () => {
   return{
     count:0,
     token:''
   }
 },
 getters:{
   countPer(){
   return this.count+=100
   }
 },
 actions:{
  setToken(data){
    this.token=data
   },
    userLogout(){
     logout().then(res=>{
       this.token=''
       localStorage.removeItem('token')
     })
   }
 },
  // 开启数据缓存
 persist: {
   enabled: true,
   strategies:[
     {
     //数据默认存储在localStorage中，key为token
       key:'token',
       storage:localStorage,
       paths:['token']
     }
   ]
 }
})

• 在vue中的使用

import {user} from '@/store/user.js'
import { storeToRefs } from 'pinia'//将数据变为响应式
const useStore=user()
const {token}=storeToRefs(useStore) 

• state使用

//解构赋值获取state中的数据
<template>
    <div>
   	 {{token}}
    </div>
</template>
const {token}=storeToRefs(useStore) 
//批量更新
 import {user} from '@/store/user.js'
import { storeToRefs } from 'pinia'//将数据变为响应式
const useStore=user()
const {token，count}=storeToRefs(useStore) 
useStore.$patch(state=>{
state.count++;
state.token=''
})

• getters使用具有缓存机制

 <template>
    <div>
   	 {{countPer}}
    </div>
</template>
import {user} from '@/store/user.js'
import { storeToRefs } from 'pinia'//将数据变为响应式
const useStore=user()
const {token,countPer}=storeToRefs(useStore) 

• actions使用

<div class="logout" @click="logout">
  	退出登录
</div>
<script setup>
import {user} from '@/store/user.js'
import { storeToRefs } from 'pinia'
const useStore=user()
const logout=()=>{
 useStore.userLogout()
}
</script>