vuex简单理解转载博客

vuex从入门到入门
------state:从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
------Getters:可以很容易地在任何组件中使用它
------mutation :更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
重要的原则就是要记住 mutation 必须是同步函数

定义:const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})

调用:store.commit('increment')

使用常量替代 Mutation 事件类型

------Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
例子:const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
es5结构写法:
actions: {
increment ({ commit }) {
commit('increment')
}
}

分发 Action
store.dispatch('increment')

你需要明白 store.dispatch 可以处理被触发的action的回调函数返回的Promise,
并且store.dispatch仍旧返回Promise

uex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

vue的组件触发流程

  1. search.js中触发一个methodA

  2. methodA触发(getter --> Actions methodA)

  3. methodA 通过vuex.actions里 Actions store.dispatch(types.METHODA)

  4. vuex.modules.search配置的mutations[types.METHODA] 进行state的操作

  5. state改变某个状态A 响应到search.js中属性a (getter --> a = search.A)

  6. --------------vuex更新数据流程:

    • dispatch可以是view视图中触发,也可以是程序业务逻辑来触发
    • actions通过commit方法发出一个改变事件。commit以是view视图中触发,也可以是程序业务逻辑来触发,也可以在actions中触发
    • mutations中具体操作state的改变
    • state的改变通过getter暴露给view,state改变后会立即通知用getter关联起来的view。
    • 创建一个Vuex.Store的实例,用于Vue实例。

vuex相关知识点的更多相关文章

  1. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

  2. Android开发涉及有点概念&相关知识点(待写)

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  3. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  4. IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  5. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  6. TCP/IP 相关知识点与面试题集

    第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...

  7. Python开发一个csv比较功能相关知识点汇总及demo

    Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...

  8. Caffe学习系列(二)Caffe代码结构梳理,及相关知识点归纳

    前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...

  9. php正则相关知识点

    关于正则,其实简单就是搜索和匹配.php,java,python等都是支持正则的,php正则兼容perl.好多同学觉得正则比较难,比较抽象,其实正则是非常简单的,主要是一个熟悉和反复练习的结果,还有一 ...

随机推荐

  1. VMware下OSSIM 4.1.0的下载、安装和初步使用(图文详解)

    不多说,直接上干货! 为什么,我写了一篇OSSIM 5.2.0的,还要再来写OSSIM 4.1.0呢,是因为,OSSIM 5.2.0所需内存较大,8G甚至16G,但是,肯定性能和里面集成组件越高级.也 ...

  2. webstock学习

    1.WebSocket是HTML5中出出现的新技术,有着web TCP之称,这也是为了适应现在实时传输数据的趋势,在这之前一般采用两种方法进行实时数据交换. 轮询机制,其中又包括长轮询. ①短轮询是指 ...

  3. mac Latex dvipdfm 缺少字体错误 Failed to read UCS2/UCS4 TrueType cmap

    dvipdfmx 命令产生 ** ERROR ** Failed to read UCS2/UCS4 TrueType cmap... 错误的原因是没有把 simsun.ttf simkai.ttf ...

  4. Java基础之面向对象

    面向对象 1.面向对象思想:     (1)概述:面向对象是相对于面向过程而言的,面向过程强调的是功能,面向对象强调的是将功能封装进对象,强调具备功能的对象:     (2)思想特点:        ...

  5. vue之导入Bootstrap和Jquery

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  6. IE兼容rgba()透明度

    一般浏览器的背景透明度可以直接设置 background:rgba(0,0,0,.5); -webkit-background:rgba(0,0,0,.5); -o-background:rgba(0 ...

  7. ARM指令解析

    今天我来总结一下arm指令的学习,今天我不会对所有的arm指令进行一一的解析,在这里希望大家去看arm汇编手册,这个手册的中文版我放在了http://download.csdn.net/detail/ ...

  8. springMVC 中 ajax get 请求和 post 请求的坑以及参数传递

    1, ajax 请求 无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致 前台ajax: $.ajax( "prod ...

  9. UVA 1220 Party at Hali-Bula (树形DP)

    求一棵数的最大独立集结点个数并判断方案是否唯一. dp[i][j]表示以i为根的子树的最大独立集,j的取值为选和不选. 决策: 当选择i时,就不能选择它的子结点. 当不选i时,它的子结点可选可不选. ...

  10. hibernate的注解

    1.many-to-one @ManyToOne @JoinColumn(name = "user_id") 2.many-to-many /** * 双向关联关系中,有且仅有一端 ...