526互联

vue3中关于pinia及其持久化插件的使用

发布时间 2023-10-26 20:35:05作者: 数星观月

pinia是一个vue中的插件，功能是一个仓库，用来存放数据。当我们的数据在多个组件中都需要用到的时候，如果一个个向后端获取就会很麻烦。数据获取一次存放在pinia仓库中，用起来就会非常方便还减轻服务器压力。pinia官网：https://pinia.vuejs.org/zh/ ，也可以在vue的生态系统导航里面找到。pinia的安装和具体使用可以在官网指南找到，下面简单演示一下怎么使用（在vue3项目中）。

首先在项目中下载安装pinia，也可以创建项目的时候就选择安装，下载安装指令的pnpm如下

pnpm add pinia

下载好之后就在项目的main.js文件中导入创建pinia的函数，然后使用vue的use函数使用创建的pinia实例，代码演示如下

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia().use(piniaPluginPersistedstate))
app.use(router)

app.mount('#app')

以上就是pinia简单使用，但pinia创建的仓库在我们关闭页面的时候就销毁了，生命周期相当于一次session，会话结束就销毁。如果我们需要本地持久化，那么就可以下载pinia的持久化插件。下面介绍一下pinia持久化插件的使用，使用流程和pinia差不多，导入然后使用插件，使用pinia本地持久化如上，导入命令如下。

插件官网：https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html

pnpm i pinia-plugin-persistedstate

这样我们就可以在项目中使用pinia和它的持久化插件，下面看一下如何创建一个pinia仓库，首先我们在项目的src下面创建一个存放仓库的目录，在目录下面创建一个个仓库，仓库代码如下

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useMusicStore = defineStore('musicStore', () => {
    //当前歌曲索引
    const currentIndex = ref(0)
    //添加歌曲
    const addSong = (song)=>{
        songs.value.push(song)
        currentIndex.value = songs.value.length - 1
    }
  return {
      currentIndex, 
        addSong
    }
},{
    //将播放的歌曲列表本地持久化
    persist: {
        enabled: true,
        strategies: [
            {
                paths: ["songs"],
                storage: localStorage,
            },
        ],
    },
})