每次获取store里面的值，我们都是这么写的

<h2>结果是：{{$store.state.sum}}</h2>
 <h2>sum做处理的结果是：{{$store.getters.bigSum}}</h2>
  <h2>结果是：{{$store.state.sum}}</h2>
   <h2>年龄：{{$store.state.name}}</h2>
   <h2>名字：{{$store.state.age}}</h2>
   <h2>学校：{{$store.state.shool}}</h2>
   <h2>地址：{{$store.state.addr}}</h2>

为了省略掉$store.state，我们可以写成计算属性的模式

 computed:{
   he(){
     return this.$store.state.sum
   },
   xuexiao(){
     return this.$store.state.shool
   },
   dizhi(){
     return this.$store.state.addr
   },
   mingzi(){
     return this.$store.state.name
   },
   nianling(){
     return this.$store.state.age
   }
 }

展示部分

 <h2>结果是：{{he}}</h2>
   <h2>年龄：{{nianling}}</h2>
   <h2>名字：{{mingzi}}</h2>
   <h2>学校：{{xuexiao}}</h2>
   <h2>地址：{{dizhi}}</h2>
   <h2>计算属性处理：{{he}}</h2>

这就可以省略展示部分的this.$store.state

• vuex有mapState方法，可以在computed中简写一些计算属性

首先打印mapState

 mounted(){
   console.log(mapState({he:'sum',xuexiao:'shool'}))
 },
//{he: ƒ, xuexiao: ƒ}

这一个返回值是一个对象
这个结果要写在computed对象里面，所我们用对象展开运算符(...mapState)

 computed:{
   //对象写法，这个mapState可以使其生成计算属性，从state中获取数据，
   //键就是生成的函数名，值就是state对象的属性名
   ...mapState({he:'sum',xuexiao:'shool',dizhi:'addr',mingzi:'name',nianling:'age'})
 },

模板展示

  <h2>结果是：{{he}}</h2>
   <h2>年龄：{{nianling}}</h2>
   <h2>名字：{{mingzi}}</h2>
   <h2>学校：{{xuexiao}}</h2>
   <h2>地址：{{dizhi}}</h2>

数组写法：

// 函数名和属性名相等时，可以用数组的简写模式
   ...mapState(['sum','shool','addr','name','age'])

模板展示

   <h2>结果是：{{sum}}</h2>
   <h2>年龄：{{name}}</h2>
   <h2>名字：{{shool}}</h2>
   <h2>学校：{{addr}}</h2>
   <h2>地址：{{age}}</h2>

mapGetters

同理，展示的是

 <h2>sum做处理的结果是：{{$store.getters.bigSum}}</h2>

在计算属性中可以写

  bigSum(){
     return this.$store.getters.bigSum
   },

简写

import { mapState,mapGetters } from 'vuex'
  // 对象写法
   ...mapGetters({bigSum:'bigSum'})
 //  数组写法
  ...mapGetters(['bigSum'])

展示

<h2>getters数据：{{bigSum}}</h2>