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


Posted in Javascript onNovember 28, 2017

使用 Vuex 来管理 Vue 的状态,有很多好的理由。其中之一就是,通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员已经创建了大量的免费插件供你使用,有许多你能想象的功能,还有一些你可能没有想到的功能。

状态持久化同步标签页、窗口语言本地化管理多个加载状态缓存操作

1. 状态持久化

vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

一个很好的例子就是购物车:如果用户不小心关闭了一个标签,他们可以重新打开并回到之前页面的状态。

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

2. 同步标签页、窗口

vuex-shared-mutations 可在不同的标签页之间同步状态。它通过 mutation 将状态储存到本地存储(local storage)来实现。选项卡、窗口中的内容更新时触发储存事件,重新调用 mutation ,从而保持状态同步。

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

3. 语言本地化

vuex-i18n 允许你轻松地用多种语言存储内容。让你的应用切换语言时更容易。

一个很酷的功能是你可以存储带有标记的字符串,比如"Hello {name}, this is your Vue.js app."。所有的翻译版本都会在标记的地方使用相同的字符串。

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

4. 管理多个加载状态

vuex-loading 有助于你管理应用中的多个加载状态。这个插件适用于状态变化频繁且复杂的实时应用程序。

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

5. 缓存操作

vuex-cache 可以缓存 Vuex 的 action。例如,如果你从服务器检索数据,这个插件将在第一次调用该 action 时缓存结果,然后在之后的dispatch中,直接返回缓存的值。必要时清除缓存也很简单。

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

Javascript 相关文章推荐
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JS获取时间的方法
Jan 21 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
javascript中的隐式调用
Feb 10 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解JavaScript的变量
Apr 04 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
Vue实现web分页组件详解
Nov 28 #Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
You might like
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js href的用法
2010/05/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python 读写中文json的实例详解
2017/10/29 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python的UTC时间转换讲解
2019/02/26 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
药剂专业毕业生求职信
2014/06/24 职场文书
宣传活动总结范文
2014/07/01 职场文书
2014年行政工作总结
2014/11/19 职场文书
学前班语言教学计划
2015/01/20 职场文书