vuex的辅助函数：mapState和mapGetters

文章目录

自己写计算属性
mapState/mapGetters生成计算属性
- 数组写法
- 对象写法
- - 对象写法（key-value，value是一个字符串）
  - 对象写法（key-value，value是一个函数）

本篇介绍vuex的辅助函数： mapState和 mapGetters。

代码涉及两个文件，

store/index.js。本例中，该文件内容不发生变更
Count.vue。本例中，该文件内容将发生多次变更，如
- 自己写计算属性
- 辅助函数（mapState/mapGetters）生成计算属性
  - 数组写法
  - 对象写法

store/index.js

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);const state = {sum:0,company:"May技术无限公司",position:"FE"
};const getters = {bigSum(state){return state.sum*10;}
}const actions = {jiaOdd(context,value){console.log("context",context);if(context.state.sum  % 2){context.commit("JIA",value);}},jiaWait(context,value){setTimeout(() => {context.commit("JIA",value);},500)}};const mutations = {JIA(state,value){state.sum += value;},JIAN(state,value){state.sum -= value;}
};export default new Vuex.Store({state,getters,actions,mutations
})

Count.vue

<template><div class="count"><h2>当前求和为{{$store.state.sum}}</h2><h2>当前求和放大10倍为{{$store.getters.bigSum}}</h2><h3>我在{{$store.state.company}}上班，我的岗位是{{$store.state.position}}</h3><select v-model="num"><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>
export default {name: 'Count',data(){return {num:1}},methods: {increment(){this.$store.commit("JIA",this.num);},decrement(){  this.$store.commit("JIAN",this.num);},incrementOdd(){this.$store.dispatch("jiaOdd",this.num);},incrementWait(){this.$store.dispatch("jiaWait",this.num);}},mounted() {console.log("Count",this);},
}
</script><style scoped>button{margin-left: 5px;}
</style>

自己写计算属性

<template><div class="count"><h2>当前求和为{{sum}}</h2><h2>当前求和放大10倍为{{bigSum}}</h2><h3>我在{{company}}上班，我的岗位是{{position}}</h3><select v-model="num"><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>
export default {name: 'Count',data(){return {num:1}},computed:{sum(){return this.$store.state.sum;},company(){return this.$store.state.company;},position(){return this.$store.state.position;},bigSum(){return this.$store.getters.bigSum;}},methods: {increment(){this.$store.commit("JIA",this.num);},decrement(){  this.$store.commit("JIAN",this.num);},incrementOdd(){this.$store.dispatch("jiaOdd",this.num);},incrementWait(){this.$store.dispatch("jiaWait",this.num);}},mounted() {console.log("Count",this);}
}
</script><style scoped>button{margin-left: 5px;}
</style>

mapState/mapGetters生成计算属性

数组写法

<template><div class="count"><h2>当前求和为{{sum}}</h2><h2>当前求和放大10倍为{{bigSum}}</h2><h3>我在{{company}}上班，我的岗位是{{position}}</h3><select v-model="num"><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 {num:1}},computed:{...mapState(["sum","company","position"]),...mapGetters(["bigSum"])},methods: {increment(){this.$store.commit("JIA",this.num);},decrement(){  this.$store.commit("JIAN",this.num);},incrementOdd(){this.$store.dispatch("jiaOdd",this.num);},incrementWait(){this.$store.dispatch("jiaWait",this.num);}},mounted() {console.log("Count",this);}
}
</script><style scoped>button{margin-left: 5px;}
</style>

对象写法

对象写法（key-value，value是一个字符串）

<template><div class="count"><h2>当前求和为{{sum}}</h2><h2>当前求和放大10倍为{{bigSum}}</h2><h3>我在{{company}}上班，我的岗位是{{position}}</h3><select v-model="num"><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 {num:1}},computed:{...mapState({sum:"sum",company:"company",position:"position"}),...mapGetters({bigSum:"bigSum"})},methods: {increment(){this.$store.commit("JIA",this.num);},decrement(){  this.$store.commit("JIAN",this.num);},incrementOdd(){this.$store.dispatch("jiaOdd",this.num);},incrementWait(){this.$store.dispatch("jiaWait",this.num);}},mounted() {console.log("Count",this);}
}
</script><style scoped>button{margin-left: 5px;}
</style>

对象写法（key-value，value是一个函数）

<template><div class="count"><h2>当前求和为{{sum}}</h2><h2>当前求和放大10倍为{{bigSum}}</h2><h3>我在{{company}}上班，我的岗位是{{position}}</h3><select v-model="num"><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 {num:1}},computed:{...mapState({sum:state => state.company,company:state => state.company,position:state => state.position}),...mapGetters(["bigSum"])},methods: {increment(){this.$store.commit("JIA",this.num);},decrement(){  this.$store.commit("JIAN",this.num);},incrementOdd(){this.$store.dispatch("jiaOdd",this.num);},incrementWait(){this.$store.dispatch("jiaWait",this.num);}},mounted() {console.log("Count",this);}
}
</script><style scoped>button{margin-left: 5px;}
</style>

vuex的辅助函数：mapState和mapGetters相关推荐

封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters
在Vue3中没有很好的方法使用Vuex中的映射函数到setup中使用,一般就使用一种效率低一些的方法 setup(props, context) {const store = useStore();c ...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
Vuex 提供了 mapState.mapGetters.mapActions 和 mapMutations 四个函数,其返回结果分别是 mappedState,mappedGetter,mapped ...
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
转载地址:https://zhuanlan.zhihu.com/p/100941659 vuex进阶一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的dat ...
vuex进阶 mapState、mapGetters、mapMutations、mapActions
一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态 import Vue from 'vue' import Vuex fr ...
前端:一篇彻底搞懂vuex (mapState、mapGetters、mapMutations、mapActions)
文章目录一.state 1.1 state使用 1.2 mapState 辅助函数二.getters 2.1 getters的使用三.Mutation 3.1 mutations的使用 3.2 ...
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普通实现求和案例演示 ...
【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
vuex 理解Vuex 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组 ...
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
mapState 和mapGetters 用于生成计算属性computed mapState({"计算属性名":"State数据","xxx" ...

vuex的辅助函数：mapState和mapGetters

文章目录

自己写计算属性

mapState/mapGetters生成计算属性

数组写法

对象写法

对象写法（key-value，value是一个字符串）

对象写法（key-value，value是一个函数）

vuex的辅助函数：mapState和mapGetters相关推荐

最新文章

热门文章