记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪)

vue Method   --->  Actions  ---> Mutions  ---> State (作用于vue)

在Vue2.X中使用vuex的情况:

  1、多个视图依赖于同一状态,  比如验证登陆情况。

  2、来自不同视图的行为需要变更同一状态 ,

  3、不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和状态的传递,更改。

新建一个mutation-types.js文件,这个文件里面只做了一件事,那就是记录了事件类型,对mutation有个整体的把握

store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性computed中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations

action中的函数触发,是在vue的methods中通过   this.$store.dispatch('方法名',参数)

action内部的函数具体写法:只是起了一个承上启下的作用,真正的处理逻辑在mutation中。

需要注意点就是:store.js里面的配置。(想把{}里面东西提出来,在App中new,屡次不成功。)

Vue2.X的状态管理vuex记录的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  3. 状态管理Vuex

    路由Router 配置 {path:'/login',component:Login} 路由出口 router-view 传参 {path:'/login/:id',component:Login} ...

  4. vue总结 08状态管理vuex

      状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管 ...

  5. Vue.js 2.x笔记:状态管理Vuex(7)

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

  6. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  7. Vue-认识状态管理vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...

  8. 状态管理(Vuex、 Flux、Redux、The Elm Architecture)

    1.https://vuex.vuejs.org/zh-cn/intro.html (vuex) 这就是 Vuex 背后的基本思想,借鉴了 Flux.Redux.和 The Elm Architect ...

  9. vue中状态管理vuex的使用分享

    一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...

随机推荐

  1. easyui关于validatebox实现多重规则验证的实践

    参考资料 http://blog.csdn.net/jumtre/article/details/38510975 http://blog.csdn.net/lybwwp/article/detail ...

  2. 双层路由设置,WAN口和LAN口连接的方法设置

    WAN口设置方法,社路由器分别为路1 和路2 1 路2的LAN口地址改为172.16.1.1,重启 2 笔记本改成172.16.1.X,然后进入设置,在里面WAN地址设置为静态地址 192.168.1 ...

  3. Windows 版本的iTunes 修改iPhone的备份路径

    帮朋友解决修改iPhone的备份路径问题,故写篇博客整理记录一下. 所需工具 Junction工具 下载该工具然后将文件放到C:\Windows 目录下,如下图: 找到iTunes的备份路径 Wind ...

  4. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) A

    Description Santa Claus is the first who came to the Christmas Olympiad, and he is going to be the f ...

  5. table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  6. 【前端】iterable类型的 forEach方法

    看三个例子: a = [ age: 1 , age: 2 ] a.forEach (item) -> item.age = 0 # 有效 console.log a # [ # age: 0 # ...

  7. springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序

    springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序 http://www.360doc.com/content/14/03 ...

  8. Java方法trim()小记

    我们一般用trim()方法的主要作用,是为了去除字符串的首尾空格.然而根据我个人的实践经验发现,trim()这个方法只能去除部分的空格或空白符,比如半角空格:对于全角空格的话,用trim()并不能去除 ...

  9. Fair Scheduler 队列设置经验总结

    Fair Scheduler 队列设置经验总结 由于公司的hadoop集群的计算资源不是很充足,需要开启yarn资源队列的资源抢占.在使用过程中,才明白资源抢占的一些特点.在这里总结一下. 只有一个队 ...

  10. 不再为Apache进程淤积、耗尽内存而困扰((转))

    本篇文章是为使用Apache+MySQL,并为Apache耗尽内存而困扰的系统管理员而写.如果您没有耐心读完本文,请参考以下步骤: 修改/etc/my.cnf,加上这样一行: log-slow-que ...