一、情景说明
前面的Vuex案例中
我们在使用state中的变量或者getter中的变量时
使用插值语法，写法如下：
<h1>当前求和为：{{$store.state.sum}}</h1><h1>当前求和放大10倍为：{{$store.getters.bigSum}}</h1><h3>我在{{$store.state.school}}，学习{{$store.state.subject}}</h3>
我们会发现，重复写了前缀：$store.state和$store.getters
那么，当业务一旦复杂，变量多起来，这边的编码效率就低了很多。
这里，mapState和mapGetters配合computed来解决这个问题。
使Vuex编码简便化！
二、案例
index.js中的state和getter配置
//准备state 用于存储数据
const state = {sum:0, //当前的和school:'中国',subject:'Vue'
};//准备getters——用于加工state中的数据
const getters = {bigSum(state){return state.sum*10}
}
vc中引入mapState,mapGetters
import {mapState,mapGetters} from 'vuex'
vc中的computed里使用mapState,mapGetters
两种写法，根据具体情况来决定使用
//借助mapState生成计算属性，从state中读取数据。（对象写法）//...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(['sum','school','subject']),//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）//...mapGetters({bigSum:'bigSum'})//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters(['bigSum'])
vc中html代码改写
经过以上配置，就不用再写一大堆前缀了
<h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3>
