35

5个Vuex插件,让你下一个VueJS项目开发速度提升3倍

 5 years ago
source link: http://developer.51cto.com/art/201812/588381.htm?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

ZfeEVrj.jpg!web

使用Vuex管理Vue.js应用程序的状态有很多充分的理由。首先,使用Vuex插件添加超酷功能非常容易。Vuex社区的开发人员已经创建了大量免费插件供您使用,其中包含您可以想象的许多功能,以及一些您可能无法想象的功能。

下面展示使用Vuex插件轻松解决下一个项目的五个功能。

  • 会话保持
  • 同步标签
  • 语言本地化
  • 管理多个加载状态
  • 缓存操作

会话保持

vuex-persistedstate使用浏览器的本地存储来跨会话保持您的状态。这意味着刷新页面或关闭选项卡不会擦除您的数据。

一个很好的用例就是购物车:如果用户意外关闭了一个标签,他们可以在页面状态完好无损的情况下重新打开它。

ZRRzM3v.jpg!web

同步标签

vuex-shared-mutation在不同浏览器选项卡之间同步状态。它通过将突变存储到本地存储来实现此目的。存储事件会触发所有其他选项卡/窗口中的更新,从而重放突变,从而保持状态同步。

q2Ajeeq.jpg!web

语言本地化

vuex-i18n允许您轻松地以多种语言存储内容。在您的应用程序中切换语言是微不足道的。

一个很酷的功能是你可以用令牌存储字符串,例如“Hello {name},这是你的Vue.js应用程序。”。您的所有翻译都可以在字符串中需要相同的标记。

Bf6fQzb.jpg!web

管理多个加载状态

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

2a6B3yj.jpg!web

缓存操作

vuex-cache可以缓存您的Vuex操作。例如,如果您从服务器检索数据,则此插件将在您第一次调用操作时缓存结果,然后在后续调度时返回缓存值。在必要时清除缓存是微不足道的。

fYni2iI.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK