vuex状态管理2
在vuex的官网https://vuex.vuejs.org中,提到的核心概念一共有5个,分别是State、Getter、Mutation、Action和Module,在上一篇随笔中,我们主要用到其中的State和Mutation,接下来,我们来分析剩下几个使用方法,在这里,是在上一篇的基础上面完成的。
这是上一篇结束时实现的功能,现在接着这个项目继续分析。
Getter
在官网中对getter的定义是:就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。也就是说, 只有改变state里面的count数据的时候会触发 getters里面的方法 获取新的值。例如,现在希望每次改变count的时候,它都能变为当前的两倍,可以这样做:
1,定义方法
2,暴露
3,使用
当点击增加按钮后,触发了mutations,实现了自增,所以前面一个数字变为了2,数据出现自增后,说明数据发生了改变,一旦数据改变,就会触发getter里面的方法,对数据实现乘以2,所以后面一个数就变为了4。
Action
官网中对于action的定义是:类似于mutation,不同在于action提交的是mutation,而不是直接变更状态;action可以包含任何异步操作。下面还是使用例子要演示。
首先是要在store.js中定义并暴露,
因为上面已经说过了,action提交的是mutation,而不是直接变更状态,所以这里的方法里面写入的就是在mutations中定义的方法。
我们在Home.vue中使用,在使用的时候需要注意的是,前面是通过事件触发mutations里面的自曾方法,现在需要改变这种方法,使用action里的方法了,如下:
实现的效果和上面是一样的。
综合使用
最后通过一个案例来总结vuex,在这个案例中,会使用到数据请求,所以要先安装vue-resource
然后在main.js中引入
在News.vue文件中请求并渲染数据。
然后再运行项目,我们会发现,每次点击新闻页面的时候,都会重新请求数据。
多次重复请求并不是友好的操作,所以,接下来就需要用vuex来实现数据持久化了,
1,在store.js中定义一个数组存储新闻数据。
2,在mutations中定义一个添加数据的方法。
3,在请求数据的时候,将请求的数据存储到state里面中,所以要触发mutations中的添加方法。
4,在页面渲染的时候,先从state里面获取数据,对获取的数据进行判断,如果有数据不为空,即直接进行渲染,如果数据为空则进行上一步的数据请求操作。这样就可以避免多次重复请求数据了。
完整代码下载:点这里
vuex状态管理2的更多相关文章
- vuex状态管理-数据改变不刷新
困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法
一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
- VueX状态管理器 的应用
VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- Vuex 状态管理的工作原理
Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
- vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
- vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
随机推荐
- MyBatis 遍历数组放入in中
必须要遍历出数组的值放入in中 如果直接将"'2','3','4','5','6','7','8'" 字符串放入in中,只会查出 inv_operate_type的值为2的数据,因 ...
- testMk
test test test test test test xinz 个人编程,写一个命令行程序 Red Green 功能设计,并提交文档到github 功利主义是一种在西方影响巨大的伦理学说,其原则 ...
- 【HDOJ4635】【Tarjan缩点+思维】【经典】
http://acm.hdu.edu.cn/showproblem.php?pid=4635 Strongly connected Time Limit: 2000/1000 MS (Java/Oth ...
- (原创) 使用pymongo 3.6.0连接MongoDB的正确姿势
0.疑惑 前两天使用pymongo连接MongoDB的时候发现了一个奇怪的现象:我本机MongoDB并没有打开,但是使用pymong.MongoClient()进行连接时,并没有异常,我的服务端也正常 ...
- pread和pwrite函数
先来介绍pread函数 [root@bogon mycode]# cat test.c #include<stdio.h> #include<stdlib.h> #includ ...
- VxWorks笔记
利用vxWorks可裁减可动态链接特性进行模块调试的分析 a) 首先,可将root.c简化,去掉大部分不需要加载的模块和想要调试的模块,以加快系统启动速度. b) 如果vxworks加载的.o中引用了 ...
- gcc的编译属性和选项
1.指定内存默认对其参数: __attribute__((packed)):按一字节对其__attribute__((aligned(n))):从此之后默认按n字节对其 例如: struct stu ...
- Understanding how uid and gid work in Docker containers
转自:https://medium.com/@mccode/understanding-how-uid-and-gid-work-in-docker-containers-c37a01d01cf Un ...
- 【Hi3516】 uboot下烧写BSP
setenv serverip xx.xx.xx.xx setenv ipaddr xx.xx.xx.xx setenv ethaddr xx:xx:xx:xx:xx:xx setenv netmas ...
- [转]总结@Autowired 和@Resource
@Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按byName自动注入罢了. @Resource有两个属性是比较重要的,分 ...