关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters
简单的理解:
const getters = {
newCount: function(state){
return state.count += 5;
}
}
---------------------------------------
组件中获取:
methods: {
newCount: function(){
return this.store.getters.newCount;
}
}
------------------------------------------
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['count'])
}
当getters中的属性和组件节点的属性相同时可以通过mapGetters辅助函数的数组参数来赋值
如果你想将一个 getters 属性另取一个名字,可以使用对象形式:
computed: {
...mapGetters({
counts: 'count'
})
}
关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters的更多相关文章
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions
介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations
在组件中提交Mutations: import { mapState, mapMutations } from 'vuex' export default { data() { return { ms ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState
一.通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ c ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- vuex mapState、mapGetters、mapActions、mapMutations的使用
例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...
- Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间
1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...
- vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- [转] vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
随机推荐
- bzoj1486【HNOI2009】最小圈
1486: [HNOI2009]最小圈 Time Limit: 10 Sec Memory Limit: 64 MB Submit: 1778 Solved: 827 [Submit][Statu ...
- 两大数相乘 -- javascript 实现
(function (){ var addLarge = function(n1,n2){ var carry = 0; var ret = ""; n1=n1.toString( ...
- java 使用xom对象数据序列化为xml、反序列化、Preferences相关操作小案例
package org.rui.io.xml; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import ...
- 加载之ready和onload
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 真不知道这个标题该怎么取,暂时就先凑 ...
- Lightoj 1018 - Brush (IV)
1018 - Brush (IV) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Muba ...
- Where Are You Standing?
/*********************************************************************** * Where Are You Standing? * ...
- BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树
BZOJ_5343_[Ctsc2018]混合果汁_二分答案+主席树 题意:给出每个果汁的价格p,美味度d,最多能放的体积l.定义果汁混合后的美味度为果汁的美味度的最小值. m次询问,要求花费不大于g, ...
- c# 读取内存
C# 用内存映射文件读取大文件(.txt) 网上有好多这类的文章,大部分都是用C/C++写的,也有部分C#写的,都思想都是一样的,调用win32 API. 至于什么是内存映射文件,相信还是有好多人 ...
- 洛谷 P3732 [HAOI2017]供给侧改革【trie树】
参考:http://blog.csdn.net/di4covery/article/details/73065684 我以为是后缀数组+某某数据结构,结果居然是01trie!!题解说"因为是 ...
- 洛谷 P1251 餐巾计划问题【最小费用最大流】
建图细节比较多,对于每个点i,拆成i和i',i表示用的餐巾,i'表示脏餐巾,连接: (s,i,r[i],p)表示在这一天买新餐巾 (i,t,r[i],0)表示这一天用了r[i]的餐巾 (s,i+n,r ...