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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue 简单自动补全的输入框的示例
Mar 12 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python回调函数的使用方法
2014/01/23 Python
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python dlib人脸识别代码实例
2019/04/04 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
平安建设工作方案
2014/06/02 职场文书
护士求职自荐信范文
2015/03/04 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
物资采购管理制度
2015/08/06 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Python语言内置数据类型
2022/02/24 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL