关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState
一、通过mapState函数的对象参数来赋值:
<p>{{ count }}</p>
<p>{{ count1 }}</p>
<p>{{ count2 }}<p>
//导入
import { mapState } from 'vuex'
export default {
data() {
return {
msg: 'vuex理解要点',
id: 1
}
},
store,
//方法二:通过mapState对象来赋值
computed: mapState({
//使用箭头函数
count: state => state.count,
//传入字符串 ‘count’ 等同于 `state => state.count`
count1: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
count2(state) {
return state.count + this.id
}
})
}
三、通过mapState函数的数组参数来赋值
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
// 映射 this.count 为 store.state.count
computed:mapState(['count'])
关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState的更多相关文章
- 关于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辅助函数的用法及作用(三)-----mapGetters
简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...
- 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学习与实践——mapState、getter、mapGetters
1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
随机推荐
- css的白富美
1,CSS(Cascading Style Sheet)是用来装饰HTML的,当浏览器读到这样一个样式的时候,它就会按照这个文档进行格式化(渲染) 2,CSS的组成:选择器和声明,声明又包括属性和属性 ...
- UVA11183 Teen Girl Squad —— 最小树形图
题目链接:https://vjudge.net/problem/UVA-11183 You are part of a group of n teenage girls armed with cell ...
- YTU 2922: Shape系列-8
2922: Shape系列-8 时间限制: 1 Sec 内存限制: 128 MB 提交: 172 解决: 99 题目描述 小聪又想借用小强的Shape类了,但是不巧的是小强去考英语四级去了,但是小 ...
- YTU 2914: xiaoping学构造函数
2914: xiaoping学构造函数 时间限制: 1 Sec 内存限制: 128 MB 提交: 148 解决: 90 题目描述 xiaoping刚接触类的构造和析构函数,对于构造函数的编写比较困 ...
- YTU 1099: Minesweeper
1099: Minesweeper 时间限制: 1 Sec 内存限制: 64 MB 提交: 180 解决: 98 题目描述 Minesweeper Have you ever played Min ...
- C#函数3递归
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...
- filter() 函数
描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 Tru ...
- 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position xxx ordinal not in range(128)
Python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...
- 待研究———node中使用session时的id不断更改问题
使用的expree,中间件为cookie-parser,express-session,当对res.session.id进行赋值操作后,再调取其值会发现,此时它的值并不是最初给定的值,而是经过加密的字 ...
- MySQL(调优慢查询、explain profile) 转
转自http://www.linuxidc.com/Linux/2012-09/70459.htm mysql profile explain slow_query_log分析优化查询 在做性能测试中 ...