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

 更新时间:2017年11月28日 11:13:45   投稿:laozhang  
在本文中,将向你展示5个特性,你可以通过 Vuex 插件轻松地添加到下一个项目中。一起来学习下。

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

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

1. 状态持久化

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

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

2. 同步标签页、窗口

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

3. 语言本地化

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

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

4. 管理多个加载状态

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

5. 缓存操作

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

相关文章

  • Vue elementUI实现树形结构表格与懒加载

    Vue elementUI实现树形结构表格与懒加载

    这篇文章主要介绍了通过Vue和elementUI实现树形结构表格与懒加载,文中的示例代码讲解详细,感兴趣的小伙伴快来跟随小编一起学习一下吧
    2022-01-01
  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue-element-admin 导出json和导入json文件的方法

    Vue-element-admin 导出json和导入json文件的方法

    这篇文章主要介绍了Vue-element-admin导出json和导入json文件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue自定义指令封装节流函数的方法示例

    Vue自定义指令封装节流函数的方法示例

    本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vuex实现及简略解析(小结)

    vuex实现及简略解析(小结)

    这篇文章主要介绍了vuex实现及简略解析(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 如何使用Vue进行文件预览与打印功能

    如何使用Vue进行文件预览与打印功能

    这篇文章主要给大家介绍了关于如何使用Vue进行文件预览与打印功能的相关资料,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,需要的朋友可以参考下
    2023-10-10
  • VUE中的v-if与v-show区别介绍

    VUE中的v-if与v-show区别介绍

    这篇文章介绍了VUE中v-if与v-show的区别,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • vue-rx的初步使用教程

    vue-rx的初步使用教程

    这篇文章主要介绍了vue-rx的初步使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中Axios的封装和API接口的管理示例详解

    vue中Axios的封装和API接口的管理示例详解

    这篇文章主要介绍了vue中Axios的封装和API接口的管理,主要目的就是在帮助我们简化代码和利于后期的更新维护,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 一文搞懂Vue中watch侦听器的用法

    一文搞懂Vue中watch侦听器的用法

    在Vue.js中,您可以使用watch选项来创建侦听器,以侦听特定属性的变化,侦听器可以在属性发生变化时执行相关的逻辑,本文给大家详细讲讲Vue中watch侦听器的用法,需要的朋友可以参考下
    2023-11-11

最新评论