SUPERW上海网站建设工作室,wordpress内容页插件,想做设计师需要学什么,网站查询域名一#xff0c;前言
上一篇#xff0c;主要介绍了 Vuex-namespaced 命名空间的实现#xff0c;主要涉及以下几个点#xff1a;
命名空间的介绍和使用#xff1b;命名空间的逻辑分析与代码实现#xff1b;命名空间核心流程梳理#xff1b;
本篇#xff0c;继续介绍 Vu…一前言
上一篇主要介绍了 Vuex-namespaced 命名空间的实现主要涉及以下几个点
命名空间的介绍和使用命名空间的逻辑分析与代码实现命名空间核心流程梳理
本篇继续介绍 Vuex 插件机制的实现 二Vuex 插件使用介绍
1Vuex 插件使用
Vuex 不仅提供了全局状态管理能力还进一步提供了插件机制便于开发者对 Vuex 插件进行增强
Vuex 插件的使用方式通过 Store 类提供的 plugin 数组进行 Vuex 插件注册
const store new Vuex.Store({// plugins注册 vuex 插件plugins: [plugin1(),plugin2()]
});备注在 plugins 数组中可以注册多个 Vuex 插件插件的执行是串行顺序执行的
2Vuex 内置的 logger 日志插件
在 Vuex 插件中内置了 logger 日志插件
// src/store/index.jsimport Vue from vue;
import Vuex from vuex;// 引入 Vuex 日志插件 logger
import logger from vuex/dist/loggerVue.use(Vuex);const store new Vuex.Store({plugins: [logger(), // 日志插件导出的 logger 是一个高阶函数],
});
export default store;备注
logger 为 Vuex 内置插件在 vuex 包中 dist 目录下logger 是一个高阶函数便于在使用插件时进行传参
logger 插件的执行效果
为 Vuex 添加 logger 插件后当状态发生变化时控制台将会输出相关日志 如图所示控制台日志将输出所触发的事件类型、事件名称、及事件执行前后的状态变化
logger 插件的效果相当于 AOP 面向切面编程在事件触发前后分别输出了相关的日志
这样通过开启 Vuex 日志插件增强了开发环境下的调试体验便于开发者快速定位状态相关的问题 三Vuex 插件开发
1vuex-persists 状态持久化插件
在使用 Vuex 插件进行状态管理时一定会遇到一个问题当页面刷新时如使用 F5 进行刷新将导致页面状态丢失
为了解决这个问题可以使用状态持久化插件vuex-persists
2vuex-persists 插件的实现
Vuex 插件的开发并不复杂
创建一个 Vuex 插件最终导出一个高阶函数在 plugin 数组中进行插件注册Vuex 的 Store 类提供的订阅方法 store.subscribe当 mutation 方法触发时被执行Vuex 的 Store 类提供的状态替换方法 store.replaceState能够更新 Vuex 中的状态
基于 Vuex 提供的插件机制vuex-persists 插件的实现逻辑如下
创建高阶函数 persists当 vuex 初始化时通过 plugin 完成拆件的注册和初始化操作使用 store.subscribe 订阅方法当 mutation 方法触发时将当前状态保存到本地当页面刷新时状态将会丢失同时 Vuex 插件重新初始化此时重新读取本地状态并通过store.replaceState将本地状态即刷新丢失的状态替换到 Vuex 状态实现状态的持久化效果
备注本地存储可通过 persists 插件参数在外部配置
localstoragesessionstoragecookie
代码实现
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 插件初始化 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 排版格式
