奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > vue >

Vue2.0 探索之路——vuex入门教程和思考 - 大灰狼的

时间:2017-10-19 21:17来源: 作者:
Vuex是什么首先对于vuex是什么,我先引用下官方的解释。http://www.tuicool.com/articles/VviqEzMVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态

Vuex是什么

首先对于 vuex 是什么,我先引用下官方的解释。http://www.tuicool.com/articles/VviqEzM

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

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

Vuex应用场景

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

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

Vuex基础概念

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

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

State

vuex的单一状态树,使用一个对象就包含了应用层的所有状态。

我的理解是,state是vuex自己维护的一份状态数据。数据的格式需要你根据业务去设计哟~~

下面是我简单设计的todolist的state状态树。

Getters

getters属性主要是对于state中数据的一种过滤,属于一种加强属性。比如你在做一个todolist,对于已完成的,你可以写一个doneTodoList的属性,在外面直接调用。其实他就是对于action和mutations的一个简化。不然你写一个doneTodoList功能,你还得写对应的action和mutation,费劲啊。

所以,总结一下,一些简单或通用的操作可以抽取到getters上来,方便在应用中引用。

Actions

action,动作。

对于store中数据的修改操作动作在action中提交。

其实action和mutation类似,但是action提交是mutation,并不直接修改数据,而是触发mutation修改数据。

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

mutation中写有修改数据的逻辑。

另外mutation里只能执行同步操作。

Module

module ,模块化。

因为随着后面的业务逻辑的增多,把vuex分模块的开发会使得代码更加简洁清晰明了,比如登录一个模块,产品一个模块,这样后面改动起来也简单嘛。

下图的 todo 目录就是一个 module ,下面的 actions.js , mutations.js 就和外面的一样。

代码实践

引入vuex依赖

npm install vuex

目录结构

store.js 将vuex维护的所有数据导出供外部使用。

mutation_type.js 维护操作类型的常量字段

main.js加载

页面使用

1.读取store里的值:

this.$store.state.字段名 

如果有 moudle 的话,假设叫 login ,那么取值又要变了,加上 module 名

this.$store.state.login.mobile

2.发起操作请求:

this.$store.dispatch('action中的方法名' , '参数') ;

参数你可以随便传json

3.getters的用法

this.$store.getters.filterDoned 
filterDoned 是在 todo 里写的一个 getters 方法,就这么调用噢

项目Github

写了一个小demo方便实践。对vuex不了解的朋友可以看看。纯小白写法,都能看得懂。如果觉得有所帮助可以点个star,感激不尽了~~

Demo 地址: https://github.com/XuXiaoGH/v...

Demo 预览: http://jyzhd.cc/dist/vuex/ind...

写在最后

本文只是一个简单的入门使用,

走过路过的朋友,如果对你有帮助的话不妨点个收藏或者推荐再走哈,那将是对我最大的鼓励,谢谢啦。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2019-01-02 18:01

奔三路小程序已改版