vuex - 学习日记

一、简单理解

简单说vuex,就是用来管理组件状态的数据,并且能在你可掌控的范围下增删改查这些数据。

store容器 , state状态

二者关系(包含):

以前我也把vuex里边的state看成是一个全局对象的感觉,就像全局变量所有页面都能用一样,所有组件都能使用它。

但是他和全局对象的区别有两点,概括来说:

1.  Vuex里边的数据是和使用它的视图,关系密切,心有灵犀。属于藕断丝还连的亲密。

  改变了state里边的数据,视图里边的展示就能跟着改变。是不是很强大。

  而全局对象的改变也能修改视图的展示。但是他俩之间需要一个媒介,你得自行监控全局对象的改变来修改展示。

2. 鉴于二者关系密切,Vuex是不能你想动就动的,支配他得需要专门的“法物”--mutations的commit

二、核心概念:

1)state  概括如下:

“单一状态树”

一个项目中只能有一个

是所有组件公用的数据源

 Vuex 的状态存储是响应式的

如何在 Vue 组件中展示状态:从 store 实例中读取状态并在计算属性中返回这个状态

1 computed: { 
2     count () { 
3         return this.$store.state.count 
4     } 
5 }

当store.state内状态值变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

2)getter

可以认为是 store 的计算属性

getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。就像计算属性一样

3)mutation

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

  官网文:“每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

  这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数”

这句话的代码解释如下:

源码与解析对比图:

state:获取store中的状态数据

payload-载荷:多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读;

事件注册: 

1 store.commit(‘state’,{
2 
3   payload: ‘载荷’
4 
5 });

4)action

由于mutation必须是同步的,这就给了action成长的机会,

因为action虽然和mutation差不多,但是它支持异步啊!

而且action,是通过提交(操控)mutation来更改state的状态,而不是自己上去直接搞,可以说是很机智的了。

接受参数 - context 对象: 与 store 实例具有相同方法和属性。

  也就是说可以拿他当store用,或者也可以直接将其命名为store。

  但注意,他确不是store本尊

分发 Action:

 this.$store.dispatch('mutationFunctionName')

action的高级之处:我们可以在 action 内部执行异步操作

 1 action(context) {
 2 
 3     //异步操作
 4     setTimeout(() = >{
 5 
 6         //变更状态
 7         context.commit('mutationFunName',value)
 8 
 9     })
10 
11 }

store.dispatch:

可以处理被触发的 action 的处理函数返回的 Promise

store.dispatch 仍旧返回 Promise

三、关键记忆点:

*  store 中的状态是响应式的

*  最好提前在你的 store 中初始化好所有所需属性。

*  调用 store 中的状态:仅需要在组件的计算属性中返回即可,

  因为当store.state内状态值变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

*  触发变化:在组件的 methods 中提交(commit) mutation

*  将所有的状态放入 Vuex? 错,如果有些状态严格属于单个组件,最好还是作为组件的局部状态。

*  mutation 必须是同步函数,比如store.commit('increment') ,

  提交这一下,那么任何由 "increment" 导致的状态变更都应该在此刻完成。而不能再执行回调函数啥的了。

2018-04-07  17:49:23

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

手机APP安装包缩减方案

安装包大小对于产品很重要 主要有如下几个原因: 1、手机APP安装包的大小会影响用户是否愿意花费流量来下载此APP; 2、包体越大下载过程越长,用户取消下载的可...

2876
来自专栏安恒网络空间安全讲武堂

Sniper-OJ 练习平台多题WriteUp

题目 ### 图书管理系统(200) ### as fast as you can(50) ### md5-vs-injection(50) ### 2048...

6637
来自专栏欧阳大哥的轮子

从Xcode10不再支持libstdc++说起

众所周知从Xcode10起,苹果摒弃了对libstdc++库的支持转而支持libc++库了。这两个库在Xcode9甚至更早的版本就已经同时存在于系统中并且可供开...

3143
来自专栏owent

boost.context-1.61版本的设计模型变化

之前写了个C++的协程框架libcopp,底层使用的是boost.context实现,然后剥离了对boost的依赖。然而这样意味着我必须时常跟进boost.co...

6581
来自专栏顶级程序员

Linux中高效编写Bash脚本的10个技巧

Linux开源社区(微信号:cn_linux) 英文:Aaron Kili,翻译:Linux中国/ch-cn 链接:linux.cn/article-8618...

3425
来自专栏菜鸟计划

Ajax详解

一、ajax定义 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统w...

3825
来自专栏GopherCoder

『Go 内置库第一季:net/url』

其实这是一个比较小的内置函数,主要用在网络请求方面上,可能最多的用途也就是用来处理网络请求的参数。当然如何你经常在项目中编写restfulAPI, 那么你也可能...

1402
来自专栏腾讯Bugly的专栏

Android 动态链接库加载原理及 HotFix 方案介绍

引言 随着项目中动态链接库越来越多,我们也遇到了很多奇怪的问题,比如只在某一种 OS 上会出现的 java.lang.UnsatisfiedLinkError,...

4977
来自专栏木头编程 - moTzxx

微信小程序Ⅵ [wx.request 的回调使用]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

9513
来自专栏CSDN技术头条

如何在JavaScript中处理大量数据

在几年之前,开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了,很多Ajax程序需要在客户端和服务器端传输大量的数据。此外,更新DOM节点的处...

1849

扫码关注云+社区

领取腾讯云代金券