关于 vuex 的使用忠告
第一、看明白这张图在说话

简单解释一下,actions接收到components的行为后actions请求api 等获取数据,提交到mutations,然后mutations中才改变state ,反映到视图中。进而完成状态的管理。简单吧。
第二、另外两个核心内容
getter (当状态在多个component中都在进行相同的处理的时候使用),
module(把store 分割成模块,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块,解决store对象臃肿的问题)
第三、state的获取方式
- 通过状态直接获取(不建议使用)
computed: { msg() { return this.$store.state.msg } }
- 通过属性访问(getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。)
computed: { msg() { return this.$store.getters.msg} }
- 通过方法访问(getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果)
store.getters.getMsg(“合理使用参数”)
- mapGetters辅助函数访问(mapGetters仅仅是将 store 中的 getter 映射到局部计算属性:)
computed: {...mapGetters([ 'msg'... ]) }
其他使用细节
改变数据只通过Action 提交(commit)到mutation中修改state
建议:在action中进行数据操作
getter中做数据过滤
以下非常非常重要:
只有在组件中需要共享的数据才使用vuex,不要什么都使用这个玩意
现在大概就这些
关于 vuex 的使用忠告的更多相关文章
- vuex - 项目结构目录及一些简单配置
首先先正经的来一段官网的"忠告": vuex需要遵守的规则: 一.应用层级的状态应该集中到单个 store 对象中. 二.提交 mutation 是更改状态的唯一方法,并且这个过程 ...
- vue2.0 --- vuex (一)
之前做vue项目中没有使用vuex 一直使用vue-router 组件.路由一直的转换,烦不胜烦 今天研究一下vuex vuex是什么: vuex是专门为vue.js应用程序开发的状态管理模式. 解 ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
随机推荐
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- centos7环境下apache2.2.34的编译安装
.获取apache2..34的源码包 http://archive.apache.org/dist/httpd/httpd-2.2.34.tar.gz .获取apache的编译参数 apache的编译 ...
- Python-Django-Ajax进阶3
1 中间件 -是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不 ...
- 分布式Session共享解决方案
分布式Session解决方案 Author:SimpleWu 分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会 ...
- npm脚本传参问题
npm脚本传参问题(比如设置env参数) windows环境下: "build": "set NODE_ENV=dev&& gulp", &qu ...
- mysql配置文件参数详解
(一) [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedir ...
- 商品规格笛卡尔积PHP
<?php $color = array('red', 'green'); $size = array(39, 40, 41); $local = array('beijing', 'shang ...
- springboot集成mybatis源码分析(一)
本篇文章只是简单接受使用,具体源码解析请看后续文章 1.新建springboot项目,并导入mybatis的pom配置 配置数据库驱动和mybatis dependency <dependenc ...
- 利用fastjson解析json并通过js&ajax实现页面的无跳转刷新
1.json是一种优秀的数据格式,在移动开发和web开发中经常用到,本例中通过一个小案例讲解如何通过alibaba的开源框架fastjson来解析jason数据格式并通过js实现无跳转刷新 2,新建一 ...