本篇介绍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>