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存储
],
}
