Vue Vuex解决重复的代码问题 简化代码

mapState简写

$store.state.sum
$store.state.age
$store.state.num
....

这种这种方法取值，如果太多很麻烦，不便于维护

可以写出计算属性

<h1>{{sum}}</h1>
....

computed:{
sum(){return this.$store.state.sum }
},
....

这样提高了代码的可读性，但是值太多还是一样需要写很多的计算属性，这时候可以导入mapState来进行生成代码，这样大大的简化了代码，可读和维护性更高

<h1>{{age}}</h1>
....

import { mapState} from 'vuex'
//导入

computed:{

...mapState({ 

he:'sum',

// sum:'sum'

age:'age',

....
})

}

相当于

sum(){return this.$store.state.sum }

//简化了很多

更简洁的写法

<h1>{{age}}</h1>
....

...mapState(['sum','age'])

sum age 一定需要和state里的名一样

---

mapGetters简写

和state一样

import { mapState,mapGetters} from 'vuex'

---

mapMutations简写

import { mapMutations } from 'vuex';

原始写法

 add()
        { 
            this.$store.dispatch('addSum',1)
        }

简写

<button @click="add(1)">加</button>  这里传参

...mapMutations({add:'addSum'})
...mapMutations(['add'],'age')
//名字一样时这样使用

---

mapActions

import {mapActions} from 'vuex'

<button @click="addSum(1)">加</button>

 ...mapActions(['addSum'])