前端框架Vue自学之Vuex(八)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex)

本博客目的:记录Vue学习的进度和心得(Vuex,终于到Vuex了,泪目)

内容:学习和使用Vuex。

正文:

Vuex

一、Vuex概念和作用解析

  1、认识Vuex

  Vuex是一个专为vue.js应用程序开发的状态管理模式

  它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。Vuex也是响应式的。

  2、状态管理

  我们可以简单地将状态管理看成把需要多个组件共享的变量(状态)全部存储在一个对象里,然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。

   看上去我们可以直接修改Vue的原型实现共享变量(自己封装也很麻烦),但其不是响应式的。而Vuex就是为了提供一个在多个组件间共享状态的插件并且还是响应式的。

  3、管理什么状态

  有什么状态是需要我们在多个组件间共享的呢?

  如果我们做过大型开发,一定遇到过多个状态,在多个界面间的共享问题。比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车的物品等等。这些状态信息,我们都可以放在统一的地方,对它进行保存和管理(用Vuex),而且它们还是响应式的。

二、单界面到多界面状态管理切换

  

三、

四、

五、

猜你喜欢

转载自www.cnblogs.com/xinkuiwu/p/12115274.html