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. 为什么static方法中不可以调用非static方法

    Java是面向对象的语言,所有的变量,方法都是针对对象而言的.一般来说,要调用一个方法,你需要new 这个方法的对象. 什么时候用static? 如果你想要: 对于一个类的所有对象共享一个变量或者是方 ...

  2. Linux系统下安装rz/sz命令及使用说明(文件上传下载)

    1.安装软件 yum -y install lrzsz 2.本地文件上传命令 rz -bye 执行该命令后,在弹出框中选择要上传的文件即可 3.下载文件到本地 sz filename

  3. Y2分班考试 笔试题总结

    1. 此题编译错误  base无法点出methodB()方法 2. 第二题选C 3.此题选D:正确的输出级别为fatal>error>warn>info>debug 4. 此题 ...

  4. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  5. springclould feign客户端添加全局参数

    用springclould feign作为调用服务的客户端,一般来说参数可以写在feignclient的方法参数里 有时需要所有feign请求都统一添加一些参数,例如token用于鉴权等,可以这样做: ...

  6. Android 滑动RecyclerView时隐藏部分控件

    在使用RecyclerView控件时,上下拖动控件时的时候,需要实时的隐藏与显示部分控件,已到达很好的用户体验.   原理很简单,当RecyclerView拖动至最上层时显示控件,当RecyclerV ...

  7. SQL注入中的整型注入实验

    首先搭建一个用于注入的环境 目录结构 conn.php 用来连接数据库的文件PHP文件 index.php 用来执行SQL命令,以及返回查询结构 index.html              一个存 ...

  8. Windows Live Writer 2012发博客配置和技巧

    一.软件准备: 最新版的是Windows Live Writer 2012,但是不提供单独的安装包,它是和微软其它软件一起的(包括MSN.Window Move Maker等),软件大小为131M,官 ...

  9. div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  10. ftpclient 遇到的一些问题

    1. FTPFile[] files=ftpClient.listFiles(ftpDirectory); 没有数据 public static boolean ftpLogin(String ser ...