当前位置：首页 > article >正文

Vue前端开发-Pinia其他扩展插件

article 2025/2/13 21:50:43

由于Pinia是一个非常底层的API模块，因此，它完全可以通过插件来扩展自身的功能，可以扩展的功能通常是一个函数，Pinia通过use方法接收该函数，并将该函数的功能传递给Pinia，从而实现扩展Pinia功能的效果。

一、扩充Store

在实际的开发过程中，有时需要对所有的Store扩展一个全局性属性，例如：在Store中扩展一个名称为tip的属性，它的属性值为“扩展属性”，实现代码如下：

在store目录下，先找到创建Pinia对象的index.js文件，并将其修改成如下列代码所示：

import { createPinia } from "pinia";
const pinia = createPinia()
pinia.use(({ store }) => {
    store.tip = '扩展属性';
    store.$state.address = '扩展状态属性';
})
export default pinia;

在上述加粗代码中，当创建完名称为pinia的实例化对象后，就可以通过use方法向该对象扩展属性，该属性既可以直接添加在Store对象中，也可以通过$state，向State对象扩展属性，这些扩展的属性都是共享的，如果需要在组件中访问它们，可以加入如下代码：

<script>
import { schStore } from "../../store/schStore";
export default {
    mounted() {
        const store = schStore();
        console.log(store.tip);
        console.log(store.$state.address);
    }
}
</script>

在上述加粗部分的代码中，先导入一个名称为schStore 的Store对象，再在mounted函数中实例化一个名称为store的Store对象，并通过store对象在控制台输出扩展的属性tip和address，最后，在控制台分别输出“扩展属性”和“扩展状态属性”字样。

需要说明的是：由于扩展的Store属性属于全局参数，因此，无法使用mapState函数映射成组件的State成员，同时，扩展的属性必须应用于Pinia已创建完成的Store对象中，否则，无法访问到扩展的属性值。

二、数据持久化

如果需要缓存整个Store对象中的State数据，可以使用pinia-plugin-persist插件，该插件是专门用于Pinia的扩展插件，功能是将State数据保存至localStorage或sessionStorage中，默认是以Store 的 id 作为 key，保存在sessionStorage对象中。

在使用pinia-plugin-persist插件之前，先需要安装该插件，在终端执行如下代码：

npm i pinia-plugin-persist --S

安装成功后，可以在package.json文件中查看到对应的版本，如下图所示
在这里插入图片描述
　　插件安装成功后，接下来，需要调用use方法将插件扩展至Pinia中，先找到store文件夹下的index.js文件，然后加入如下代码：

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

在上述代码的加粗部分中，先导入安装好的pinia-plugin-persist插件，再使用use方法，将该插件扩展到pinia对象中，最后，在定义Store时，声明使用本地缓存即可，即在创建Store时，添加如下代码的配置：

import { defineStore } from "pinia";
export const schStore = defineStore("sch_id", {
    state: () => {
        return {
            name: "精英学校",
            count: 1200,
            grade: ['小学', '初中']
        }
    },
    getters: {
    },
    actions: {
    },
    persist: {
        enabled: true,
    }
})

在上述代码的加粗部分中，使用persist属性来声明是否可以使用缓存，如果enabled值为true，表示使用本地缓存来保存Store中的State对象，当然，该属性还可以指定使用什么类型的缓存对象和缓存哪几个State对象中的属性，如下代码所示：

persist: {
    enabled: true,
    strategies: [
        {
            storage: localStorage,
            paths: ['name', 'count']
        }
    ]
}

在上述代码的加粗部分中，strategies用于描述缓存时的策略，storage属性用于指定什哪种类型的缓存对象，默认为sessionStoreage，也可以通过该属性指定localStoreage对象，paths属性用于指定需要缓存的State属性名称，如果没有指定，则不会缓存。
在这里插入图片描述