当前位置: 首页 > news >正文

【手写 Vuex 源码】第十一篇 - Vuex 插件的开发

一,前言

上一篇,主要介绍了 Vuex-namespaced 命名空间的实现,主要涉及以下几个点:

  • 命名空间的介绍和使用;
  • 命名空间的逻辑分析与代码实现;
  • 命名空间核心流程梳理;

本篇,继续介绍 Vuex 插件机制的实现;


二,Vuex 插件使用介绍

1,Vuex 插件使用

Vuex 不仅提供了全局状态管理能力,还进一步提供了插件机制,便于开发者对 Vuex 插件进行增强;

Vuex 插件的使用方式:通过 Store 类提供的 plugin 数组进行 Vuex 插件注册:

const store = new Vuex.Store({// plugins:注册 vuex 插件plugins: [plugin1(),plugin2()]
});

备注:在 plugins 数组中可以注册多个 Vuex 插件,插件的执行是串行顺序执行的;

2,Vuex 内置的 logger 日志插件

在 Vuex 插件中,内置了 logger 日志插件:

// src/store/index.jsimport Vue from 'vue';
import Vuex from 'vuex';// 引入 Vuex 日志插件 logger
import logger from 'vuex/dist/logger'Vue.use(Vuex);const store = new Vuex.Store({plugins: [logger(),   // 日志插件:导出的 logger 是一个高阶函数],
});
export default store;

备注:

  • logger 为 Vuex 内置插件,在 vuex 包中 dist 目录下;
  • logger 是一个高阶函数,便于在使用插件时进行传参;

logger 插件的执行效果:

为 Vuex 添加 logger 插件后,当状态发生变化时,控制台将会输出相关日志:

image.png

如图所示,控制台日志将输出所触发的事件类型、事件名称、及事件执行前后的状态变化;

logger 插件的效果相当于 AOP 面向切面编程,在事件触发前后分别输出了相关的日志;

这样,通过开启 Vuex 日志插件,增强了开发环境下的调试体验,便于开发者快速定位状态相关的问题;


三,Vuex 插件开发

1,vuex-persists 状态持久化插件

在使用 Vuex 插件进行状态管理时,一定会遇到一个问题:当页面刷新时(如使用 F5 进行刷新),将导致页面状态丢失;

为了解决这个问题,可以使用状态持久化插件:vuex-persists;

2,vuex-persists 插件的实现

Vuex 插件的开发并不复杂:

  1. 创建一个 Vuex 插件,最终导出一个高阶函数(在 plugin 数组中进行插件注册);
  2. Vuex 的 Store 类提供的订阅方法 store.subscribe:当 mutation 方法触发时被执行;
  3. Vuex 的 Store 类提供的状态替换方法 store.replaceState:能够更新 Vuex 中的状态;

基于 Vuex 提供的插件机制,vuex-persists 插件的实现逻辑如下:

  1. 创建高阶函数 persists,当 vuex 初始化时通过 plugin 完成拆件的注册和初始化操作;
  2. 使用 store.subscribe 订阅方法:当 mutation 方法触发时,将当前状态保存到本地;
  3. 当页面刷新时,状态将会丢失,同时 Vuex 插件重新初始化,此时重新读取本地状态,并通过store.replaceState将本地状态(即刷新丢失的状态)替换到 Vuex 状态,实现状态的持久化效果;

备注:本地存储可通过 persists 插件参数在外部配置:

  • localstorage
  • sessionstorage
  • cookie;

代码实现:

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);// vuex-persists 插件实现
function persists() {return function (store) {console.log("----- persists 插件执行 -----")// 取出本地存储的状态let data = localStorage.getItem('VUEX:STATE');if (data) {console.log("----- 存在本地状态,同步至 Vuex -----")// 如果存在,使用本地状态替换 Vuex 中的状态store.replaceState(JSON.parse(data));}// subscribe:由 vuex 提供的订阅方法,当触发 mutation 方法时被执行;store.subscribe((mutation, state) => {console.log("----- 进入 store.subscribe -----")localStorage.setItem('VUEX:STATE', JSON.stringify(state));})}
}const store = new Vuex.Store({plugins: [logger(),   // 日志插件:导出的 logger 是一个高阶函数persists()  // 持久化插件:vuex-persists]
});export default store;

3,测试插件效果

1,启动项目,控制台输出日志:完成 persists 插件初始化;

image.png

2,点击按钮更新状态:

点击按钮,触发根模块 mutation 类型 changeNum 方法,按照插件注册顺序执行 logger、persists 插件;

触发 subscribe 状态变更事件订阅的回调方法,将新状态保存至本地存储 localStorage,根模块商品数量状态 num 由 10 更新为 15;

3,当页面刷新时:

若没有持久化插件,会由于页面刷新导致 Vuex 中的状态丢失;

此时,当页面刷新时,persists 持久化插件在重新执行初始化操作时,会读取本地存储中保存的状态数据,即由于页面刷新丢失的数据,并通过 store.replaceState 方法更新 Vuex 中的状态,实现状态的持久化效果;

这样就实现了一个状态持久化插件的雏形;

接下来,继续实现 Vuex 所提供的插件机制;


四,Vuex 插件机制分析

通过官方 Vuex 插件所提供的插件机制,创建并实现了一个简易的 Vuex 插件;

Vuex 插件的实现,主要使用 Vuex 提供的以下方法:

  • Vuex 插件的 plugins 数组,提供插件注册功能;
  • store.subscribe:状态变更时的订阅回调功能;
  • store.replaceState:状态替换功能;

下一篇,将根据以上分析,实现 Vuex 的插件机制;


五,结尾

本篇,主要介绍了 Vuex 插件的开发,主要涉及以下几个点:

  • Vuex 插件的使用介绍;
  • Vuex 插件开发和使用分析;
  • Vuex 插件机制的分析;

下一篇,继续介绍 Vuex 插件机制的实现;


维护日志

  • 20211012
    • 由于新扩充的 Vuex 插件机制源码部分较多,故将 Vuex 插件部分拆分为两篇文章:《Vuex 插件开发》和《Vuex 插件机制实现》;
    • 修改文章标题和摘要;
    • 优化文字描述与 md 排版格式;
http://www.lryc.cn/news/7036.html

相关文章:

  • opencv基础知识和绘图图形
  • 15- 决策回归树, 随机森林, 极限森林 (决策树优化) (算法)
  • Flink相关的记录
  • 配置可视化-基于form-render的无代码配置服务(一)
  • Java 代理模式详解
  • 知识付费小程序怎么做_分享知识付费小程序的作用
  • 14- 决策树算法 (有监督学习) (算法)
  • 如何编译和运行C++程序?
  • Golang 给视频添加背景音乐 | Golang工具
  • 让AI护理医疗:解决卫生系统的痛点
  • Windows 离线安装 MySQL 8
  • 【前端攻城狮之vue基础】02路由+嵌套路由+路由query/params传参+路由props配置+replace属性+编程式路由导航+缓存路由组件
  • CHAPTER 1 Zabbix介绍及安装
  • 认识V模型、W模型、H模型
  • excel ttest检测
  • PDFPrinting.Net操作进行细粒度控制
  • SegPGD
  • ESP-IDF + Vscode ESP32 开发环境搭建以及开发入门
  • SpringMvc的请求和响应
  • 【Vue3】首页主体-面板组件封装
  • 部署 K8s 集群
  • 关于北京君正:带ANC的2K网络摄像头用户案例
  • ccc-Backpropagation-李宏毅(7)
  • 找出字符串中第一个匹配项的下标-力扣28-java
  • SpringBoot 监听Redis key过期回调
  • 蓝桥杯C/C++VIP试题每日一练之回形取数
  • 四控、三管、一协调
  • jdk19下载与安装教程(win10)超详细
  • 来来来,手摸手写一个hook
  • 【C++】AVL树