首页 > 其他分享 >vue3探索——pinia高阶使用

vue3探索——pinia高阶使用

时间：2023-09-16 22:02:08浏览次数：44  
标签：插件 const key state pinia vue3 高阶 store

以下是一些 Pinia 的其他高阶功能：

  1. storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。
  2. 状态持久化：Pinia 并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorage 来将状态保存在客户端。
  3. 插件系统：Pinia 允许你编写自定义插件，以扩展和定制状态管理功能。你可以创建插件来处理持久化、日志记录、错误处理等任务，以适应你的特定需求。

响应式解构storeToRefs()

背景

在组件中访问仓库state,getters,actions时，总要在变量名前面带上仓库实例名，像下面这样，每个变量都这么写就会显得很代码很累赘。而直接解构的话，数据会丢失响应式。

import store from '@/store/senior.ts';
const userStore = store();
// 访问state中的money，需要敲上'userStore.'
console.log(userStore.money);

// 直接解构，会丢失响应式
const { age } = userStore;

使用

在组件中使用storeToRefs可以保证解构出来的数据是响应式的数据。

import { storeToRefs } from 'pinia';
// ......
const { age } = storeToRefs(userStore);
console.log(age.value); // 别忘了 .value 这个小尾巴~

状态持久化插件pinia-plugin-persist

pinia本身不提供持久化存储状态，这里我们使用插件pinia-plugin-persist 进行持久化存储。

npm: pinia-plugin-persist

Pinia Plugin Persist

1-安装

  • yarn
yarn add pinia-plugin-persist
  • npm
npm install pinia-plugin-persist
  • pnpm
pnpm add pinia-plugin-persist

2-配置

在src/store/index.ts中进行pinia的配置

import { createPinia } from 'pinia';
// 1-引入包
import piniaPersist from 'pinia-plugin-persist';

const pinia = createPinia();
// 2-使用pinia-plugin-persist插件
pinia.use(piniaPersist);

export default pinia;

src/main.ts

// ......
import { createApp } from 'vue';
import App from './App.vue';
// 1-引入pinia配置文件
import pinia from '@/store/index.ts';

const app = createApp(App);
// 2-使用pinia配置文件
app.use(pinia);

app.mount('#app');

打开项目下的ts配置文件tsconfig.json

{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}

3-使用

组合式API写法

在仓库中的defineStore() 第三个参数进行配置。

src/store/senior.ts

export const store = defineStore(
    'senior',
    () => {
        const age = ref(18);
        const money = ref(100);

        return {
            age,
            money
        }
    },
    {
        persist: {
            enabled: true, // 启用持久化存储
            // 存储策略，可以配置多个存储策略，一条策略对应一个存储
            strategies: [
                {
                    key: 'local_age', // 存储的key名
                    storage: localStorage, // 存储方式
                    paths: ['money'] // 指定state字段进行存储
                },
                {
                    key: 'session_age',
                    storage: sessionStorage
                }
            ]
        }
    }
);

persist参数说明：

  • enabled：(true) 开启持久化存储。
  • strategies：(Array) 配置存储策略，一条策略对应一个存储。
    • key：(String) 存储的key名。
    • storage：(Storage) 存储方式，默认值是sessionStorage，可以是localStorage，也可以自定义存储方式。
    • paths：(Array<string>) 指定某些state字段进行存储。若不配置，默认对整个state进行存储。

选项式API写法

src/store/senior.ts

export const store = defineStore('senior', {
    state() {
        return {
            age: 18,
            money: 100,
        }
    },
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'local_age',
                storage: localStorage,
                paths: ['money']
            },
            {
                key: 'session_age',
                storage: sessionStorage
            }
        ]
    }
})

4-自定义存储方式(cookie)

以下示例是对官方示例，进行优化的版本。

  • yarn
yarn add js-cookie
  • npm
npm install js-cookie
  • pnpm
pnpm add js-cookie

(2)定义仓库

src/store/senior.ts

import { defineStore } from "pinia";
import { ref } from 'vue';
import Cookies from 'js-cookie';

// 1-定义存储方式cookiesStorage
const cookiesStorage: Storage = {
    setItem(key, state) {
        // 判断是值，还是整个仓库
        const isKey = Object.keys(JSON.parse(state)).includes(key);
        if (isKey) {
            // 值
            return Cookies.set(key, JSON.stringify(JSON.parse(state)[key]), { expires: 3 });
        }
        else {
            // 仓库state
            return Cookies.set(key, state, { expires: 3 });
        }

    },
    getItem(key) {
        // 判断键值是否存在
        let value = Cookies.get(key);

        // 这里应该需要判断是整个仓库state、还是值
        // 但目前没有发现较好的判断方法，所以persist必须配置paths
        /*
            // 如果是整个仓库state
            return value;
        */

        return value ?
            // 存在，返回对应的值(parse处理，保证和原类型一致)
            JSON.stringify({ [key]: JSON.parse(value) })
            :
            // 不存在，不做parse处理，防undefined报错
            JSON.stringify({ [key]: value });
    }
}

export const store = defineStore('senior', () => {
    const age = ref(123456);

    return {
        age,
    }
}, {
    persist: {
        enabled: true,
        strategies: [
            {
                storage: cookiesStorage, // 2-使用cookiesStorage存储方式
                key: 'age',
                paths: ['age'] // 3-必须配置paths指定state字段，否则数据会错乱
            },
        ]
    }
});

！！！注意：目前，根据官方文档的示例以及笔者的实践，使用cookie进行持久化存储，persist.strategies必须要配置paths 属性，即无法默认存储整个state，否则数据会出现错乱（文章中就不演示了，有兴趣的小伙伴儿可自行尝试）。

插件系统

介绍

Pinia 插件是一个函数，函数接收一个参数context(上下文对象)，可以获取pinia实例、app应用等。

export functionmyPiniaPlugin(context) {
  context.pinia // 使用 `createPinia()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的 store
  context.options // 定义存储的选项对象传递给`defineStore()`
	// ...
};

然后使用 pinia.use() 将此函数传递给 pinia：

pinia.use(myPiniaPlugin);

插件仅适用于在 将pinia传递给应用程序后创建的 store，否则将不会被应用。

功能

pinia官网描述pinia插件的功能：

  • 向 Store 添加新属性
  • 定义 Store 时添加新选项
  • 为 Store 添加新方法
  • 包装现有方法
  • 更改甚至取消操作
  • 实现本地存储等副作用
  • 仅适用于特定 Store
  • ……

向 Store 添加新属性

自定义插件函数返回(return)一个对象，对象中就是需要增加的属性。

在src/store/index.ts中，配置pinia插件。

import { createPinia } from 'pinia';
import { ref } from 'vue';
const pinia = createPinia();

// 1-定义插件：向store增加属性
const expandStore = () => {
    // 2-这里把需要增加的属性return出去即可
    return {
        hello: ref(123) // 在所有store上添加'hello'状态
    };
}
// 3-使用插件
pinia.use(expandStore);

export default pinia;

读取 Store 配置项

可以通过插件函数context.options 来获取每个store的额外配置，以便根据每个仓库的功能进行区别开发。

1-定义 Store 时添加新选项

  • 在组合式API中，defineStore() 的第三个参数就是仓库的配置项。
  • 在选项式API中，直接在defineStore() 的第二个参数（一个对象）中添加属性作为配置项。

src/store/senior.ts

组合式API

import { defineStore } from "pinia";
export const store = defineStore('senior',
    () => {
        return {}
    },
    {
        haha: {
            option1: '123'
        }
    }
);

选项式API

import { defineStore } from "pinia";
export const store = defineStore('senior',
    {
        state: () => ({}),
        getters: {},
        actions: {},
        haha: {
            option1: '123'
        }
    }
);

2-插件中获取每个store的选项

src/store/index.ts

// 这里使用解构赋值，把options从context中解构出来
const expandStore = ({ options }) => {
    console.log('options', options);
}
pinia.use(expandStore);

监听仓库变化$subscribe()和$onAction()

在插件中使用 store.$subscribe()和 store.$onAction()，可以监听仓库的变化。

pinia.use(({ store }) => {
  store.$subscribe(() => {
    // 在存储变化的时候执行
  })
  store.$onAction(() => {
    // 在 action 的时候执行
  })
})

包装或重写现有方法

重写$reset方法

可以参考上一篇博文，重写了$reset方法：vue3探索——5分钟快速上手大菠萝pinia

import { createPinia } from 'pinia';
const pinia = createPinia();
 
// 1-使用pinia自定义插件
pinia.use(({ store }) => {
    // 2-获取最开始的State
    const initialState = JSON.parse(JSON.stringify(store.$state));
    // 3-重写$reset()方法
    store.$reset = () => {
        // 4-利用$patch()批量变更state，达到重置state的目的
        store.$patch(initialState);
    }
});
 
export default pinia;

暂时没有更多辣~

标签：插件,const,key,state,pinia,vue3,高阶,store
From： https://www.cnblogs.com/cry0-0/p/17707386.html

相关文章

  • vue3-路由遇到的问题
    在Vue3中，使用VueRouter来管理应用程序的导航和路由。下面是VueRouter的一些常见使用方法：通过npm或yarn安装VueRouter：npminstallvue-router或yarnaddvue-router在主文件（通常是main.js）中导入VueRouter并创建一个实例：import{createApp}from'vue'importrouterfrom'......
  • 不再困惑：一文读懂Vue2与Vue3的主要差异
    Vue3相对于Vue2有很多改进和新特性。以下是一些主要的区别：性能更好：Vue3的性能比Vue2更好，因为它使用了更少的代码和更高效的算法。例如，Vue3使用Proxy代替了Object.defineProperty来监听数据变化，这使得Vue3的性能更高。组合式API：Vue3引入了组合式API，这是一种新的编写组件逻辑的方式。......
  • Vue3开发环境搭建全攻略：Vite的详细介绍
    Vite简介Vite这个单词是一个法语单词，意思就是轻快的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的。Vite特性介绍Vite主打特点就是轻快冷......
  • vue3.3.x setup 新实验性特性 defineModel 定义多个属性
    由于有些业务组件需要定义多个响应式props，类似这种(比较懒，没上ts)，在vue3.3.x以前，如果不用三方库，代码会变得很繁琐<scriptsetup> constprops=defineProps({ modelValue:{ type:Object, default:()=>({}) }, fields:{ type:Object, default:()=>(......
  • vue3videplayer播放m3u8视频流注意事项
    前言使用vue3开发项目时,碰上需要做一个视频流列表的页面,最开始是想获取所有列表数据后创建对应的video标签,这样默认获取第一帧作为封面,同时暂停视频减轻不断请求的压力。但开发后发现视频就算暂停后也会继续请求视频流,多个视频反而会导致页面卡顿。方案手动获取视频的第一......
  • 解决vue3中抽离出来的js如何调用页面的方法
    有时我们会用render渲染表格的columns，里面的按钮如何去调用.vue文件的方法？思路；在.vue文件中我们通过参数的方式传给.js文件，然后用变量接收，点击时执行（注意：.vue文件中setup执行比较早，按钮是点击事件，不会主动执行函数。为防止函数未声名就当做参数传递，必须在最后执行getFn函数，和d......
  • vue3 elementplus 列表中添加排序功能，移动的时候修改背景色
    <el-tablesize="medium":border="true":data="branchTableData":row-style="changeColor":stripe=falsestyle="width:100%;">......
  • vue3项目 基于vuedraggable插件实现拖拽上下移动
    //父页面<template><divclass="main_body"><blockTitletitle="事件详情"/><a-formref="formRef":model="formValue"style="width:100%"class="form_bo......
  • 万字长文带你全面掌握Vue3
    在2020年9月19日，vue更新了3.0的正式版，不知不觉，已经过去了好几个月了，作为一位前端切图仔，是时候开始学习了，每次抱着准备学、再等等、明天说的想法，成功在发布了两个多月的时候来认真学习了一波，这里来总结一下vue3到底有哪些更新，来帮各位没有时间去了解vue3的朋友来一次快速入门。如何......
  • Vue3语法基本使用
    1、watch使用watch(监听数据源,执行函数,[配置参数])//配置参数：立即执行深度监听{immediate:true,deep:true}1.1监听基本数据类型单一数据源<scriptsetup>import{ref,watch}from'vue'letname=ref('张麻子')//监听器watch(name,(new......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99