先行者计划--1107微课 《什么是Vuex?》| 文字简版

vuex是什么东西?

官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。"

恩,从这句话可以看出,它应该是一种编写js的思路,并不是一种新的技术。做什么什么的模式嘛,就是“这个事儿该怎么做”的意思呗。

接下来,"它采用集中式存储,管理vue应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。"

这个就是说,集中式存储,就是把vue应用的所有的状态放在一个统一的地方。所有要使用状态的角色都来这里获取状态,兄弟组件传递信息不用再找爸爸了。那么放哪了呢?你可以暂且认为这是一个全局变量的套路。

我们说,一切工具都是为了需求服务的。

现在看来,这个vuex就是为管理"状态"而服务的。

你把门打开,门的状态从关转换为开;

你把开关从横转到竖,开关的状态从横向转换为纵向;

你从左到右拖动网页上的按钮,它的位置坐标x发生了变化。

这些变化的就是状态,就是此物现在是什么样。开的?关的?横的?竖的?

状态的改变,是因为我们的行为改变了它的外观。

反过来说,也是事物的表现层对我们的action做出了反馈。

即,改变了事物的状态,就是改变了事物的外观(表现层,view)。

回到网页上来讲,组件的状态就是”这个组件现在什么样“。 把所有的组件”现在是什么样?“都统一的保存的一个地方,就是”集中式存储管理应用的所有组件的状态“。

引申开去的讲,前端所有会引起变化的,例如click,drap,load,ajax,show,hide等等,都会引起变化,同时,它们也都是“状态”,而vuex要管理的,也就是它们所引起的变化。

以上这些关于vue状态的描述,都是我个人主观的理解。

关于"状态"的描述,未必完全正确,但我认为大方向应该没有错。

<!-- 虽不中,亦不远矣。 -->

刚才说了,可以暂且把vuex的状态管理当成一个全局变量来看待。

但现在我们要说一下它和全局变量的区别:

1,vuex中存储的state是响应式的。

每当store中的state变化,那么components的view也相应的会得到update;

2,改变store中的state的唯一方法,就是commit mutations,提交变化。

<!-- -->

Vuex使用store对象来保存和管理整个应用的状态,

在store里包含以下对象,

-- state – 存放状态

-- getters – state的计算属性 (是不是感觉很像redux中的reducers?)

-- mutations – 更改状态的逻辑,同步操作

(是不是感觉有点像redux中的subscribe?)

-- actions – 提交mutation,异步操作

(会不会感觉有点像 redux当中 的dispatch({type.xxx})? )

-- mudules – 将store模块化

因为vue应用是模块化的开发,所以组件的状态在state中的保存方式,

必然也是按对应的模块的结构来保存的。

<!-- -->

官方的说法:

state,驱动应用的数据源;(所有状态保存在这)

view,以声明方式将state映射到视图;(改变状态引发表现层变化)

actions,响应在view上的用户输入导致的状态变化。(事件改变状态)

<!-- -->

现在可以确定,Vuex的核心就是store[stɔ:(r)]对象。

因为是统一管理状态的,所以每个vue应用只能有一个store对象。

在它里面包含着此应用中的状态,state。

注意:

数据流都是单向的

组件能够调用 action

action 用来派发 Mutation

只有 mutation 可以改变 state

store 是响应式的,无论 state 什么时候更新,组件都将同步更新

这是一个最简章的vuex的结构:(它不能运行,因为它只是结构)

这里的参数是一个对象,它就是redux中的reducers,也就是计算的过程。 只不过在这个dmeo中,它带有逻辑和事件、状态

const store = new Vuex.Store({
 state: {
        // 存放状态
    },
     getters: {
        // state的计算属性
        // 用来从 store 获取 Vue 组件数据
    },
    mutations: {
        // 更改state中状态的逻辑,同步操作
    },
    actions: {
        // 提交mutation,异步操作
        // 可以给组件使用的函数
    },
    modules: {
        a: moduleA,
        b: moduleB,
        // ...
    }
});

<!-- 截图很清晰,代码也很简单 -->

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

R语言爬虫实战——知乎live课程数据爬取实战

本文是一篇R语言爬虫实战练习篇,同样使用httr包来完成,结合cookies登录、表单提交、json数据包来完成整个数据爬取过程,无需书写复杂的xpath、cs...

48460
来自专栏张善友的专栏

RESTful API 设计最佳实践

背景 目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个”万能“的设计...

42480
来自专栏LinXunFeng的专栏

iOS - 给高仿微信添加直播聊天功能

23430
来自专栏扎心了老铁

使用beanstalkd实现定制化持续集成过程中pipeline

持续集成是一种项目管理和流程模型,依赖于团队中各个角色的配合。各个角色的意识和配合不是一朝一夕能练就的,我们的工作只是提供一种方案和能力,这就是持续集成能力的服...

36670
来自专栏我的小碗汤

6个最好的Go语言Web框架

原文:Top 6 web frameworks for Go as of 2017

22310
来自专栏微服务生态

深入浅出Netflix Conductor使用

Netflix Conductor框架是典型的服务编排框架,通过Conductor还可以实现工作流和分布式调度,性能非常卓越。

1.3K30
来自专栏13blog.site

小测试

可以在 @RequestMapping 注解里面加上 method=RequestMethod.GET 或者使用 @GetMapping 注解

21110
来自专栏vue学习

6.vue-router之命名路由和命名视图

① 官方文档的解释:https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在rou...

11710
来自专栏北京马哥教育

高可用集群基本概念与heartbeat文本配置接口

一、高可用集群基本概念: 什么是高可用集群: 所谓高可用集群,就是在出现故障时,可以把业务自动转移到其他主机上并让服务正常运行的集群构架 > 高...

37570
来自专栏蓝天

三种web性能压力测试工具http_load webbench ab小结

题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种 http_load 下载地址:http://www.acme.com/sof...

21610

扫码关注云+社区

领取腾讯云代金券