vuex mapGetters的使用

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {name: '张三',number: 0,list: [{ id: 1, name: '111' },{ id: 2, name: '222' },{ id: 3, name: '333' },]},// 在store对象中增加getters属性getters: {getMessage(state) { // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上return `hello${state.name}`;}},
});export default store;

每次都写this.$store.getters.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，官方建议我们可以使用mapGetters去解构到计算属性中，就像使用mapState一样，就可以直接使用this调用了，就像下面这样：

<script>
import { mapState, mapGetters } from 'vuex';
export default {mounted() {console.log(this.name);console.log(this.getMessage);},computed: {...mapState(['name']),...mapGetters(['getMessage']),},
}
</script>

当然，和mapState一样你也可以取别名，取外号，就像下面这样：

...mapGetters({ aliasName: 'getMessage' }),  // 赋别名的话，这里接收对象，而不是数组

使用

console.log('vuex:',this.aliasName);

vuex mapGetters的使用相关推荐

vuex mapGetters
1.vuex 配置 //vuex的配置 //注意Store是大写 const store = new Vuex.Store({ //数据保存 state: { show: false, count: ...
uniapp使用Vuex mapGetters全局变量
详细讲解前言定义comm.js文件定义getters.js文件定义index.js文件使用监听值的变化前言现在需要满足这样一个场景: 很多页面都要共用一个变量的值,同时要监听变量值的变 ...
vuex mapGetters使用
// formStatisticsFoundation.js ,命名空间为formStatisticsFoundation getters: {zzStatisticsData(state) {con ...
Vuex说明及Todos项目改造
Vuex(vue) / Flux (angular) /Redux(react) vuex 是什么? 状态管理工具状态即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具,采用 ...
逐行粒度的vuex源码分析
vuex源码分析了解vuex 什么是vuex vuex是一个为vue进行统一状态管理的状态管理器,主要分为state, getters, mutations, actions几个部分, vue组件基 ...
vuex辅助函数和vuex5个属性
在上篇中,我们可以知道如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名.显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的. 1. ...
Vue进阶（幺肆捌）：Vuex 辅助函数详解
文章目录一.前言二.辅助函数三.如何使用辅助函数四.辅助函数如何去映射 vuex.store 中的属性 4.1 mapState: 把 state 属性映射到 computed 身上 4.2 ...
最详细Vuex教程（超详细）-基本使用
Vuex 组件之间传值目标:熟悉组件之间传值的各种情况(关注非父子之间传值) 父组件向子组件传值 props 子组件向父组件传值 $emit 非父子组件之间传值 : 爷孙:兄弟发布订阅模式(微博: ...
Vuex的五个属性及使用方法。
Vuex介绍 vuex是专门为Vue.js应用程序开发的状态管理模式.它采用集中式存储,管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. state 数据存贮 getter ...

vuex mapGetters的使用

vuex mapGetters的使用相关推荐

最新文章

热门文章