vuex 中插件的编写案例解析

1、第一步

const myPlugin = store => {
 // 当 store 初始化后调用
 store.subscribe((mutation, state) => {
  // 每次 mutation 之后调用
  // mutation 的格式为 { type, payload }
 });
};

2、第二步

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
});

二、编写一个打印日志的插件

1、函数的书写

import _ from 'lodash';
function logger() {
 return function(store) {
  let prevState = store.state;
  store.subscribe((mutations, state) => {
   console.log('prevState', prevState);
   console.log(mutations);
   console.log('currentState', state);
   prevState = _.cloneDeep(state);
  });
 };
}

2、使用

export default new Vuex.Store({
 modules: {
  ...
 },
 strict: true,
 plugins: process.NODE_ENV === 'production' ? [] : [logger()]
});

三、 vuex 数据持久化

1、函数的书写

function vuexLocal() {
 return function(store) {
  const local = JSON.parse(localStorage.getItem('myvuex')) || store.state;
  store.replaceState(local);
  store.subscribe((mutations, state) => {
   const newLocal = _.cloneDeep(state);
   sessionStorage.setItem('myvuex', JSON.stringify(newLocal));
  });
 };
}

2、使用

export default new Vuex.Store({
 modules: {
  ...
 },
 strict: true,
 plugins: process.NODE_ENV === 'production' ? [vuexLocal()] : [logger(), vuexLocal()]
});

3、类似的第三方库

1. vuex-persistedstate

2. vuex-persist

总结

以上所述是小编给大家介绍的vuex 中插件的编写案例解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue.JS项目中5个经典Vuex插件

    Vue.JS项目中5个经典Vuex插件

    使用 Vuex 来管理 Vue 的状态,有很多好的理由.其中之一就是,通过 Vuex 插件可以非常容易的扩展一些很酷的功能.Vuex 社区中的开发人员已经创建了大量的免费插件供你使用,有许多你能想象的功能,还有一些你可能没有想到的功能. 状态持久化同步标签页.窗口语言本地化管理多个加载状态缓存操作 1. 状态持久化 vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化.这意味着刷新页面或关闭标签页都不会删除你的数据. 一

  • Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据持久化,也可以

  • 详解vuex持久化插件解决浏览器刷新数据消失问题

    众所周知,vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放,通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,手动存再手动取会觉得很麻烦,这个时候就可以使用vuex的插件vuex-solidification 插件地址: vuex-solidification, 欢迎star 插件原理 vuex有一个hook方法:store.subscribe((mutation, state) => {}) 每次在mutation方法执

  • vuex 中插件的编写案例解析

    1.第一步 const myPlugin = store => { // 当 store 初始化后调用 store.subscribe((mutation, state) => { // 每次 mutation 之后调用 // mutation 的格式为 { type, payload } }); }; 2.第二步 const store = new Vuex.Store({ // ... plugins: [myPlugin] }); 二.编写一个打印日志的插件 1.函数的书写 import

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • PyTorch中的squeeze()和unsqueeze()解析与应用案例

    PyTorch中的squeeze()和unsqueeze()解析与应用案例

    目录 1.torch.squeeze 2.torch.unsqueeze 3.例子 附上官网地址: https://pytorch.org/docs/stable/index.html 1.torch.squeeze squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的数去掉第一个维数为一的维度之后就变成(3)行.squeeze(a)就是将a中所有为

  • vuex中的state属性解析

    vuex中的state属性解析

    目录 state属性介绍 state的使用 扩展 vuex的State 单一状态树 在Vue组件中获得 Vuex 状态 mapState辅助函数 state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树——用一个对象就包含了全部的应用层级状态.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快

  • Java中常用的Lambda表达式案例解析

    目录 1.ForEach 2.Collect 3.Filter 4.Map 5.MapToInt 6.Distinct 7.Sorted 8.groupingBy 9.FindFirst 10.Reduce 11.Peek 12.Limit 13.Max,Min 总结 前言: 我们日常工作中,Lambda 使用比较多的场景,就是集合类下的 Lambda 流操作,往往几行代码可以帮助我们实现复杂代码 接下来我们把 Lambda 流的常用方法用案列讲解一下. 1.ForEach 集合的遍历forEa

  • 详解vuex之store源码简单解析

    关于vuex的基础部分学习于https://www.jb51.net/article/163008.htm 使用Vuex的时候,通常会实例化Store类,然后传入一个对象,包括我们定义好的actions.getters.mutations.state等.store的构造函数: export class Store { constructor (options = {}) { // 若window内不存在vue,则重新定义Vue if (!Vue && typeof window !== '

  • Python UnboundLocalError和NameError错误根源案例解析

    如果代码风格相对而言不是那么的pythonic,或许很少碰到这类错误.当然并不是不鼓励使用一些python语言的技巧.如果遇到这这种类型的错误,说明我们对python中变量引用相关部分有不当的认识和理解.而这又是对理解python相关概念比较重要的.这也是本文写作的原因. 本文为理解闭包相关概念的做铺垫,后续会详细深入的整理出闭包相关的博文,敬请关注. 1.案例分析 在整理闭包相关概念的过程中,经常发现UnboundLocalError和NameError这两个错误,刚开始遇到的时候可能很困惑,

  • Oracle使用触发器和mysql中使用触发器的案例比较

    一.触发器 1.触发器在数据库里以独立的对象存储, 2.触发器不需要调用,它由一个事件来触发运行 3.触发器不能接收参数 --触发器的应用 举个例子:校内网.开心网.facebook,当你发一个日志,自动通知好友,其实就是在增加日志的时候做一个出发,再向表中写入条目. --触发器的效率很高 举例:论坛的发帖,每插入一个帖子都希望将版面表中的最后发帖时间,帖子总数字段进行同步更新,这时使用触发器效率会很高. 二.Oracle 使用 PL/SQL 编写触发器 1.--PL/SQL创建触发器的一般语法

  • 基于Vuejs和Element的注册插件的编写方法

    1.首先要在HTML文档中引入jQuery版本2.0以下的.一个vuejs库 一个Element-UI库 <script src="js/jquery-1.11.0.min.js"></script> <script src="js/vue.js"></script> <script src="js/Element-UI.js"></script> 2.HTML的布局  &l

  • Java中的static关键字全面解析

    Java中的static关键字全面解析

    static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列举了一些面试笔试中常见的关于static的考题.以下是本文的目录大纲: 一.static关键字的用途 二.static关键字的误区 三.常见的笔试面试题 若有不正之处,希望谅解并欢迎批评指正. 请尊重作者劳动成果,转载请标明原文链接: http://www.cnblogs.com/dolphin05

随机推荐