vue——vuex mapState,mapGetters,mapMutations,mapActions

当多次获取state中的数据时会出现大量的 $store.state.属性名 造成代码的冗余同时也很麻烦。就可使用 mapState(引用时使用的名称,‘state中的属性名’) 或 mapState(‘state中的属性名’)
第二种需要引用时使用的名称与 state中的属性名相同

例如

//引入
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed{//借助mapState生成计算属性 从state中获取数据（对象写法）...mapState({Sum:'sum',Subject:'subject',……}),   //借助mapState生成计算属性 从state中获取数据（数组写法） 当引用时使用的名称与state中的属性名相同时...mapState(['school',……]),
}//mapGetters

<h1>{{Sum}}</h1>
<h1>{{school}}</h1>
<h1>{{Sbuject}}</h1>

mapGetters与mapState用法相同只不过是mapGetters获取的是getters中的数据

computed{...mapGetters(['bigSum'])
}

<h3>{{bigSum}}</h3>

mapMutations生成与Mutations对话的方法用法与mapGetters相同，只不过数据必须通过调用时传输

mapActions生成与Actions对话的方法用法与mapGetters相同，只不过数据必须通过调用时传输

vue——vuex mapState,mapGetters,mapMutations,mapActions相关推荐

Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理搭建vuex环境创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
vuex 理解Vuex 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组 ...
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
mapState 和mapGetters 用于生成计算属性computed mapState({"计算属性名":"State数据","xxx" ...
mapState mapGetters
1. mapState方法:用于帮助我们映射state中的数据为计算属性 computed: //借助mapState生成计算属性: sum. school. subject (对象写法)... ma ...
vue vuex 大型项目demo示例
1.vuex 动态模块配置 import Vue from 'vue' import Vuex from 'vuex' import store from '@/store'; // 使用Vuex插件 ...
Vuex状态管理-mapState、mapMutations、mapActions
一.mapState Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. // store.j ...
vueX 内容辅助函数 mapMutations、mapActions
VueX中的核心内容 state 存放状态 mutations state成员操作 getters 加工state成员给外界 actions 异步操作 modules 模块化状态管理 1: State ...
vue3.0下如何使用mapState，mapGetters和mapActions
vue3.0下如何使用mapState,mapGetters和mapActions 1.新建useMapper.js 2.新建useState.js 3.新建useGetters.js 4.新建use ...

vue——vuex mapState,mapGetters,mapMutations,mapActions

vue——vuex mapState,mapGetters,mapMutations,mapActions相关推荐

最新文章

热门文章