为什么需要 Vuex?

为什么需要 Vuex

官方文档

  • 使用场景

    当系统中有一份数据在多个组件展示时,比如说 {userInfo: {userName: '李明'}} 这一份数据,在其他组件中也会有展示用户名的情况,但当用户自己修改后,这份全局的数据也应该要同步的修改,并且在其它组件也会同步的修改。

    还有比如说登录状态,当用户成功登录后,会生成一份 {hasLogin: true} 的全局数据,当用户去访问一些有权限的页面时,就会判断是否是已登录状态,如果用户登出或登录凭证失效时,即 {hasLogin: false} 时,就不允许访问,并且跳转到登录页面。

    这里就会有一些公共的状态数据去要维护,可以通过 Vuex 维护。

  • 运行机制

    Vuex(来源于 Vuex 官网)

    可以看到,绿色框表示 Vuex ,已经不再与组件强相关了,独立于组件,独立提供响应式数据。

    整个的运行机制也是一个单项的数据流,Vuex 提供数据驱动视图 Vue Component,视图通过 Dispatch 派发 Actions,Actions 中可以做一些异步的操作,可以通过 Ajax 接口从后端获得一些我们想要的后端数据,然后我们由 commit 的形式提交到 Mutations,由 Mutate 更改 State 的最终数据。

    Mutations 中是纯同步的操作,如果有异步的操作,我们可以在 Actions 中操作。如果没有异步的操作,是可以直接从组件 commit 到 Mutations 的。

    1556439406409

    • 为什么需要 Mutations 这一步骤呢

      是因为可以通过 Devtools 官方插件记录数据的变化,可以进行进一步的调试。

最近的文章

How To Secure Your Linux Server In 7 Easy Steps

HowToSecureYourLinuxServerIn7EasySteps如何通过7个简单的步骤加…

继续阅读
更早的文章

CentOS7.4 安装 MySQL8.0

InstallMySQL8.0onCentOS7.4MySQL安装官方文档步骤这里我是通过YumRe…

继续阅读