Vue2.0 探索之路——vuex入门教程和思考

Vuex是什么

首先对于vuex是什么,我先引用下官方的解释。

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

就我的直观理解 vuex类似于维护了一个全局的Map对象。你可以往里存放 key-value。然后所有的state数据操作都方法化,保证操作的可追踪和数据的干净。

Vuex应用场景

其实对于vuex的应用场景一开始我有点误区,因为我把它当做了一个从始至终类似于 localstorage的存在。后来发现一刷新页面,vuex中的state存放的数据会丢失。因为它只是在当前页面初始化生成的一个实例,你一刷新页面所有数据重新生成,数据就没了。

所以,vuex只能用於单个页面中不同组件(例如兄弟组件)的数据流通。

想必大家在想项目中啥情况会用到vuex吧。
官方是说到了时间你自然知道啥时候用了,因为小项目加入vuex,代码成本比较高,你得写各种action,mutation,dispatch交互。你自个儿都会恶心掉。

只有项目大了,组件多了,你需要一个状态机来解决同一个页面内不同组件之间的数据交流
就比如说我下面例子中的 todolist中,todo输入框是一个组件,todolist展示框也是一个组件,他们同属于一个页面,你用传统的 event bus是很不方便的解决这个问题的。

还有就是子组件想改变父组件的情况下,就比如我们最近做的一个项目里的动态表单,其中一个是做了弹出框选择职业类,选完还得回填到父组件,以前的方式,你可能需要写很多的event bus去拦截事件,现在你可以用vuex去很清晰的解决这个问题,修改vuex里的值,父组件自动更新。

这里写图片描述

Vuex基础概念

vuex中涉及的概念主要有下面几点,下面做个简单的介绍和理解。

Vuex 官方文档:https://vuex.vuejs.org/zh-cn/

转自:https://segmentfault.com/a/1190000008861913

发布了179 篇原创文章 · 获赞 82 · 访问量 55万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章