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'])