Vuex mapGetter的基本使用
getter相当于Vuex中的计算属性
- 对
state
做处理再返回 mapGetters
把Store
中的getters
映射到组件中的计算属性中
Store文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: 'Hello world',
count: 0
},
getters: {
reverseMsg(state){
return state.msg.split('').reverse().join('')
}
},
mutations: {
},
actions:{
},
modules:{
}
})
vue文件
<template>
<div>
<p>count: {{num}}</p>
<p>msg: {{message}}</p>
<p>Normal-reverseMsg: {{$store.getters.reverseMsg}}</p>
<p>Getter-reverseMsg: {{reverseMsg}}</p>
<p>Rename-msgBeReversed: {{msgBeReversed}}</p>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
computed:{
/**
相当于
num: state => state.count
message: state => state.msg
*/
...mapState({num: 'count', message: 'msg'}),
/**
相当于
reverseMsg: getters.reverseMsg
*/
...mapGetters(['reverseMsg']),
/**
重命名,防止与组件内data数据冲突
相当于
msgBeReversed: getters.reverseMsg
*/
...mapGetters({msgBeReversed: 'reverseMsg'})
}
}
</script>
Vuex mapGetter的基本使用的更多相关文章
- vue的vuex在使用...mapState 和...mapGetter报错的解决方案
from:https://blog.csdn.net/ysterling/article/details/88145765 采用mapState 和mapGetter,在页面使用时报错,这是因为bab ...
- vuex 使用文档
安装 直接下载CDN 引用 <script src="/path/to/vue.js"></script> <script src="/pa ...
- vue2.0项目实战(5)vuex快速入门
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- Vuex笔记
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Vuex - 状态管理器,可以管理你的数据状态(类似于 React的 Redux) 一个 Vuex 应用的核心是 store(仓库,一个 ...
- vuex之 mapState, mapGetters, mapActions, mapMutations 的使用
一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.cnblogs.com/adouwt/p/8283 ...
- vuex里mapState,mapGetters使用详解
这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- vuex深入浅出
本文主要记录使用vuex的使用场景.重要组成部分和学习心得. 1.说在前面 学习vue有两周的时间了,目前已经对vue的基础使用比较熟悉了.但是一直对vuex的使用耿耿于怀,这么说是因为总是不太理解, ...
- Vuex实践
本文来自网易云社区 作者:刘凌阳 前言 2017年对于Vue注定是不平凡的一年.凭借着自身简介.轻量.快速等特点,Vue俨然成为最火的前端MVVM开发框架.随着Vue2.0的release,越来越多的 ...
随机推荐
- [Qt2D绘图]-05绘图设备-QPixmap&&QBitmap&&QImage&&QPicture
这篇笔记记录的是QPainterDevice(绘图设备,可以理解为一个画板) 大纲: 绘图设备相关的类:QPixmap QBitmap QImage QPicture QPixmap ...
- 集训 T2-监考老师
大致题意: 找出一个位置可以选出最大的"横排总和+竖列总和". 基本思路 利用前缀和的思想在读入的时候把每一列每一行的总和都算出来, 然后暴力枚举每一个点,每一个点的答案就是这一行 ...
- faker生成器生成虚拟数据的Python模块
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:行哥 今天给大家介绍一个Faker模块,一款基于Python的测试数 ...
- Inoreader - 在线Rss阅读器
- 高效C++:构造/析构/赋值
了解C++默认提供和调用的函数 编译器会自动为每一个空类创建构造函数.拷贝构造函数.赋值运算符以及析构函数 不要使用编译器自动创建的函数,要杜绝这种情况发生,自己编写这些函数 如果不想使用编译器自动生 ...
- 7.20试机测 T3 阶乘之和 暴力AC题解
7.20试机测 T3 阶乘之和 暴力AC题解 题外话:此乃本蒟蒻发表的第一篇题解,大家多多关照,支持一下,谢谢 题面 3.阶乘之和(sum.pas/in/out) 问题描述: 给定一个非负整数 n, ...
- (一) BIO,NIO, 阻塞,非阻塞,你懂了吗
一般来说,一个输入操作通常包括两个阶段: .等待数据准备好: .从内核向进程复制数据 是否同步的判断依据是: 是否 针对的 整个过程,即2个阶段,是否有阻塞 是否阻塞的判断依据是: 按 程序等待消息通 ...
- 什么是PHP 面向对象
PHP 面向对象 在面向对象的程序设计(英语:Object-oriented programming,缩写:OOP)中,对象是一个由信息及对信息进行处理的描述所组成的整体,是对现实世界的抽象. 在现实 ...
- 转载——完整的ASCII码表
完整的ASCII码表,转载自下面的博主: http://www.cnblogs.com/xmxu/archive/2012/07/10/2584032.html
- 一本通 高手训练 1788 爬山 dp 斜率 凸包
LINK:爬山 很早以前看的题目 发现自己想的完全不对 这道题还是比较有价值的. 先不考虑走的路线问题 考虑某个点能看到的最高的山. 分左边和右边来考虑 考虑左边 利用单调栈存长度单调递减的山 不能直 ...