mapState mapGetters
2024-05-25 08:09:49
1. mapState方法:用于帮助我们映射state中的数据为计算属性
computed:
//借助mapState生成计算属性: sum、 school、 subject (对象写法)... mapState({sum: 'sum' ,school: 'school' ,subject:'subject'}),//借助mapState生成计算属性: sum、 school、 subject (数组写法)...mapState(['sum' ,' school','subject']),},2. mapGetters方法: 用于帮助我们映射getters中的数据为计算属性
computed:
//借助mapGetters生成计算属性: bigSum (对象写法)...mapGetters( {bigSum: 'bigSum'}),//借助mapGetters生成计算属性: bigSum (数组写法)... mapGetters(['bigSum' ])},index.js
// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)// 准备actions--用于响应组件中的动作
const actions = {/* jia:function(context,value){console.log('actions中的jia被调用',context,value);context.commit('JIA',value)},jian:function(context,value){console.log('actions中的jian被调用',context,value);context.commit('JIAN',value)}, */jiaOdd:function(context,value){console.log('actions中的jiaOdd被调用',context,value);if (context.state.sum % 2) {context.commit('JIA',value)}},jiaWait:function(context,value){console.log('actions中的jiaWait被调用',context,value);setTimeout(()=>{context.commit('JIA',value)},500)},
}
// 准备mutations--用于操作数据（state）
const mutations = {JIA(state,value){// console.log('mutations中的JIA被调用了',state,value);state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被调用了',state,value);state.sum -= value}
}
// 准备state--用于存储数据
const state = {sum:0,//当前的和school:'尚硅谷',subject:'前端'
}
// 准备getters--用于将state中的数据进行加工
const getters = {bigSum(state){return state.sum*10}
}// 创建store
const store = new Vuex.Store({// 对象中的key和保存对应值的变量重名，可以简写actions:actions,mutations,state,getters
})// 暴露store
export default store/* 等同于export default new Vuex.Store({})
*/count.vue
<template><div><h1>当前求和为：{{sum}}</h1><h1>当前求和放大10倍为：{{bigSum}}</h1><h3>我在{{school}},学习{{subject}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>import {mapState,mapGetters} from 'vuex'export default {name:'Count',data(){return {n:1,//用户选择的数字}},computed:{// 靠程序员自己亲自去写计算属性/* sum(){return this.$store.state.sum},school(){return this.$store.state.school},subject(){return this.$store.state.subject}, */// 借助mapState生成计算属性，从state中读取数据（对象写法）// ...mapState({'he':'sum',xuexiao:'school',xueke:'subject'}),// 借助mapState生成计算属性，从state中读取数据（数组写法）...mapState(['sum','school','subject']),/* *********************************************** *//* bigSum(){return this.$store.state.bigSum}, */// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）// ...mapGetters({bigSum:'bigSum'})// 借助mapGetters生成计算属性，从getters中读取数据（数组写法）...mapGetters(['bigSum'])},methods: {increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)},},mounted() {// console.log('Count',this.$store)const x = mapState({'he':'sum',xuexiao:'school',xueke:'subject'})console.log(x);},}
</script>3. mapActions方法:用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xxx)的函数
methods:{//靠mapActions生成: incrementOdd、 incrementWait (对象形式)...mapActions({incrementOdd: 'jiaOdd' , incrementWait:'jiawait'})//靠mapActions生成: incrementodd、 incrementWait (数组形式)... mapActions(['jiaOdd', jiaWait'])}4. mapMutations方法:用于帮助我们生成与mutations对话的方法，即:包含$store.commit(xxx)的函数
methods:{//靠mapActions生成: increment、 decrement (对象形式)...mapMutations({increment:'JIA', decrement: 'JIAN'}),//靠mapMutations生成: JIA、 JIAN (对象形式)...mapMutations(['JIA','JIAN']),}备注: mapActions与mapMutations使用时，若需要传递参数需要:在模板中绑定事件时传递好参数，否则参数是事件对象。
Count.vue
<template><div><h1>当前求和为：{{sum}}</h1><h1>当前求和放大10倍为：{{bigSum}}</h1><h3>我在{{school}},学习{{subject}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data(){return {n:1,//用户选择的数字}},computed:{// 借助mapState生成计算属性，从state中读取数据（对象写法）// ...mapState({'he':'sum',xuexiao:'school',xueke:'subject'}),// 借助mapState生成计算属性，从state中读取数据（数组写法）...mapState(['sum','school','subject']),/* *********************************************** */// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）// ...mapGetters({bigSum:'bigSum'})// 借助mapGetters生成计算属性，从getters中读取数据（数组写法）...mapGetters(['bigSum'])},methods: {// 程序员亲自写方法/* increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)}, */// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）...mapMutations({increment:'JIA',decrement:'JIAN'}),// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）// ...mapMutations(['JIA','JIAN']),// 使用数组写法要记得将上方点击事件名字换成JIA JIAN/* ***************************************** *//* incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)}, */// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）// ...mapActions(['jiaOdd','jiaWait'])// 使用数组写法要记得改上方点击事件名字 jiaOdd jiaWait},mounted() {// console.log('Count',this.$store)const x = mapState({'he':'sum',xuexiao:'school',xueke:'subject'})console.log(x);},}
</script><style>button{margin-left: 5px;}
</style>mapState mapGetters相关推荐
- Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理 搭建vuex环境 创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
- vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名 造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
- [vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
- vuex里mapState,mapGetters使用详解
一.引用和搭建 以下四步骤 vue项目以及vuex引用,在新版vue-cli V3 以上时,可以直接选择创建带有 vuex.详见我的另一个博客 1.初始化并创建一个项目 vue init webpac ...
- Vuex实践-mapState和mapGetters
一.前言 本文章是vuex系列的最后一篇,主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters. 二.多个模块中mapState和mapGetters的 ...
- VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例 演示 ...
- Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
Vuex 提供了 mapState.mapGetters.mapActions 和 mapMutations 四个函数,其返回结果分别是 mappedState,mappedGetter,mapped ...
- vuex的辅助函数：mapState和mapGetters
文章目录 自己写计算属性 mapState/mapGetters生成计算属性 数组写法 对象写法 对象写法(key-value,value是一个字符串) 对象写法(key-value,value是一个 ...
- 【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
vuex 理解Vuex 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组 ...
最新文章
- 让ubuntu下的eclipse支持GBK编码
- 英特尔柏安娜：数据中心演进的三大推动力
- 20个有用的jq弹窗
- linux smb 启动失败,[已解决]windows能看到smb，但是打不开
- Prime Distance On Tree-树分治+FFT
- 同一个世界不同的人（转）
- 自定义用户控件的使用
- XSS-Game Level 4
- sql raiserror_SQL Server PRINT和SQL Server RAISERROR语句
- POJ1769（线段树+DP)
- TortoiseGit-创建分支、合并分支
- 如何禁止计算机自动安装驱动,安全第一 阻止Win7自动安装驱动程序
- 极客学院小程序视频教程
- CTF密码学之SM4
- 音视频开发技术，让智能家居更智能！
- Linux即时通讯软件都有哪些？政企要怎么挑选？
- cf修改游戏客户端是什么意思_cf封号原因是非法篡改游戏客户端是什么意思
- TI DSP芯片SCI模块的波特率自适应
- Android 备份(提取)apk
- docker配置加速器，快速拉取镜像