5个Vuex插件让你的VueJS项目开发速度提升更快

曾经终败给现在 2021-09-18 16:16 361阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70][]

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

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

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

## **缓存操作** ##

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

![20190401102155241.gif][]

## **语言本地化** ##

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

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

## ![20190401102226672.gif][] ##

## **会话保持** ##

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

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

![2019040110230689.gif][]

## **管理多个加载状态** ##

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

## ![20190401102346565.gif][] ##

## **同步标签** ##

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

![20190401102404159.gif][]

欢迎留言，共同进步。或者关注微信公众号\[筑梦前端\]。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70]: /images/20210812/3219ed0ec3e945818662890174e1e748.png
[20190401102155241.gif]: /images/20210812/e505ec1a8b824554887f74b938ca2274.png
[20190401102226672.gif]: /images/20210812/655947780e0747f4b922ea8abfddbdae.png
[2019040110230689.gif]: /images/20210812/1220785888f94a34813a3fefcac1cd57.png
[20190401102346565.gif]: /images/20210812/71b08645b04f466fb6770ee21f4dca17.png
[20190401102404159.gif]: /images/20210812/6159d4b4d2af44809a0197fdd890862a.png