// 与state平级，配置getters对象
const getters = {
  bigSum(state){    // getters对象里设置一个处理函数，state作为形参
    return state.sum*10     // 通过return返回处理后的数据
  }
}
// 在组件中通过vc上的$store中的getters对象，可以获取到处理后的数据
// $store.getters.bigSum就是上面处理后的数据

{{$store.state.sum}}
{{$store.state.school}}
{{$store.state.student}}
// 用计算属性将上面的代码简化
computed: {
  sum(){
    return $store.state.sum
  },
  school(){
    return $store.state.school
  },
  student(){
    return $store.state.student
  }
}
// 这样模板中就可以写的简单一些
{{sum}}
{{school}}
{{student}}

// 知识回顾---扩展运算符
// 扩展运算符就是在数组/对象的前面加三个点，相当于把数组/对象拆分成了以逗号分隔的参数序列
let obj = {x: 100, y: 200}
let obj1 = {
  a: 1,
  ...obj,
  b: 2
}
// 上面的代码中，会将obj的一组组key: value拆出来放到obj1中

<script>
  // 在组件中引入mapState和mapGetters
  import {mapState, mapGetters} from 'vuex'
  export default{
    name: '',
    data(){},
    computed: {
    // 使用mapState方法生成计算属性（对象写法）
    ...mapState({sum: 'sum', schoool: 'school', student: 'student'})
    // 使用mapState方法生成计算属性（数组写法）
    // 当计算属性名 和 data中要获取的数据名字相同时，就可以使用数组形式的写法
    ...mapState(['sum', 'school', 'student'])  
    }
    // mapState({sum: 'sum', schoool: 'school', student: 'student'})
    // 直接使用mapState函数，里面的参数以键值对的形式，传入属性名和state中对应的数据
    // mapState处理的结果是一个对象，里面包含了与传入的属性名 对应的函数
    // 由于computed节点是一个对象，又包裹mapState处理结果的对象，这就造成语法的错误
    // 所以要使用扩展运算符，把mapState返回的对象拆分成参数序列才能放到computed中
  } 
</script>

<template>
  <div class="containor">
    <select v-model.number="number">    <!-- 将获取的数据强制转换为number数值型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(number)">点我+1</button>
    <button @click="decrement(number)">点我-1</button>
    <!-- 使用mapMutations生成事件回调函数，则必须在绑定事件函数的时候传入参数 -->
  </div>
</template>
<script>
  // 在组件中引入mapMutations和mapActions
  import {mapMutations, mapActions} from 'vuex'
   export default{
    name: '',
    data(){
      return {
        number: 1
      }
    },
    methods: {
      // 组件绕过了dispatch给Actions的过程，直接commit给Mutations
      increment(){      
        this.$store.commit('increment', this.number)
      },
      decrement(){      
        this.$store.commit('decrement', this.number)
      }
      // 使用mapMutations生成methods节点中的方法(对象写法)
      // mapMutations函数的形参传入一个对象，key、value分别是methods节点下注册的方法名和提交给mutations对象的方法名
      ...mapMutations({increment: 'increment', decrement: 'decrement'})
     // 注意这种写法没有传递数据this.number，所以要在绑定事件函数的时候传入参数
     // 使用mapMutations生成methods节点中的方法(数组写法)
     // 当methods节点下注册的方法名和提交给mutations对象的方法名一致时，可以用数组简写
     ...mapMutations(['increment', 'decrement'])
    }
   }
</script>

methods: {
  incrementOdd(){
    this.$store.dispatch('incrementOdd',this.number)
  },
  incrementWait(){
    this.$store.dispatch('incrementWait',this.number)  
  },
  ...mapActions({incrementOdd: 'incrementOdd', incrementWait: 'incrementWait'})
  // 使用mapAcions生成methods节点中的方法(数组写法)
  // 当methods节点下注册的方法名和dispatch派遣给actions对象的方法名一致时，可以用数组简写
  ...mapActions(['increment', 'decrement'])
}
// 同理，在绑定事件的时候得把参数写上，因为mapActions生成methods方法时没有传递this.number
<button @click="incrementOdd(number)">奇数时点我+1</button>
<button @click="incrementWait(number)">点我1s后再+1</button>