理解Vuex的辅助函数mapState
参考的地址是: https://www.cnblogs.com/tugenhua0707/p/9794423.html
之所以会在这里记录下来,是为了方便自己以后忘记的时候查看学习而已~;
并没有别的意思~;
如果想看详细版本
去这里:https://www.cnblogs.com/tugenhua0707/p/9794423.html
作者写的很详细的~
当我们的组件需要获取多个状态的时候,
将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题,
我们可以使用mapState的辅助函数来帮助我们生成计算属性。
mapState函数返回的是一个对象,
我们需要使用一个工具函数将多个对象合并为一个,
这样就可以使我们将最终对象传给computed属性。
store/state.js 代码如下:
export default {
add: 0,
errors: '',
counts: 0
};
store/mutations.js 代码如下:
import * as types from './mutations-types';
export default {
[types.ADD] (state, payload) {
state.add = payload;
},
[types.SETERROR] (state, payload) {
state.errors = payload;
},
[types.COUNTASYNC] (state, payload) {
state.counts = payload;
}
}
store/mutations-types.js 代码如下:
// 新增list
export const ADD = 'ADD';
// 设置错误提示
export const SETERROR = 'SETERROR';
// 异步操作count
export const COUNTASYNC = 'COUNTASYNC';
store/index.js 代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as getters from './getters'
import * as actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
home.vue 在mounted生命周期打印一下 console.log(this);
<template>
<div></div>
</template>
<script type="text/javascript">
export default {
data() {
return {
}
},
methods: {
},
mounted() {
console.log(this);
}
}
</script>
如上代码,我们使用 mapState工具函数会将store中的state映射到局部计算属性中。
我们在mounted方法内,直接使用 this.xx 即可使用到对应computed中对应的属性了。也就是 我们使用 this.add 就直接映射到 this.$store.state.add 了 。
当然mapState也可以接受一个数组,如下简单代码:
computed: {
/*
...mapState({
add: state => state.add,
counts: state => state.counts
})
*/
...mapState([
'add',
'counts'
])
},
mounted() {
console.log(this);
}
可以看到,接受数组也是可以的,在mounted生命周期内,我们直接可以使用 this.add 或 this.counts 可以获取到值了。
切记:mapState的属性的时候,一定要和state的属性值相对应,也就是说 state中定义的属性值叫add,那么mapState就叫add,如果我们改成add2的话,就获取不到add的值了
理解Vuex的辅助函数mapState的更多相关文章
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法
原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...
- vuex 源码:深入 vuex 之辅助函数 mapState
前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- 扩展运算符及其在vuex的辅助函数里的应用详解
一.扩展运算符 <1>为什么扩展运算符会诞生? 因为箭头函数没有arguments,所以才有了扩展运算符 <2>在箭头函数里 ...
- Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...
- Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...
- VueJs(14)---理解Vuex
理解Vuex 一.Vuex 是什么? 首先我们来分析一种实际开发中用vue.js的场景,你有n个组件,当你改变一个组件数据的时候需要同时改变其它n个组件的数据,那么我想你可能会对 vue 组件之间的通 ...
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
随机推荐
- 在springboot中,如何读取配置文件中的属性
摘要:在比较大型的项目的开发中,比较经常修改的属性我们一般都是不会在代码里面写死的,而是将其定义在配置文件中,之后如果修改的话,我们可以直接去配置文件中修改,那么在springboot的项目中,我们应 ...
- 限时促销,火山引擎 ByteHouse 为企业带来一波数智升级福利!
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 面对庞杂的海量数据,稳定高速的实时数据处理能力,成为了当下企业数智升级过程中备受关注的点. ByteHouse 是 ...
- Solon cloud 使用融断器 sentinel 或 guava 或 semaphore
Solon Cloud 是一套防腐层的架构方案.提供统一的接口定义和配置设计,从而实现不同框架统一体验的效果. 目前,已适配的融断器有三个插件且体验方式完全相同,分别是: sentinel-solon ...
- Could not autowire. No beans of 'RestTemplate' type found.
解决方案 @Resourceprivate RestTemplate restTemplate;
- Linux--修改会话超时时间
控制用户在一段时间内没有活动时会话的自动注销时间 1.修改ssh配置文件(适用于SSH会话) vim /etc/ssh/sshd_config ClientAliveInterval 1800 #秒 ...
- #2069:Coin Change(完全背包)
Problem Description Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cen ...
- vue异步组件
- Vue - 组件通信(父子单向传递、父子相互传递、祖孙隔代传递)
父组件向子组件单向传递 父组件:引入子组件后,通过属性绑定的形式,将值传入子组件: ` ` 子组件:子组件通过props接收父组件传入的值; ` {{sonGetParam}} ` 子组件向父组件单向 ...
- zzuli 1023
java 读入单个字符 import java.util.Scanner; public class Main{ public static void main(String args[]){ Sca ...
- 机器学习-决策树系列-GBDT算法-集成学习-30
目录 1. 复习 2. GBDT 3. gbdt应用于二分类: 3. gbdt应用于多类 4. 叶子节点输出值c的计算 5. GBDT的其他应用 6. GBDT+LR 代码实现 1. 复习 再开始学习 ...