vuex----小案例

index.js

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备action-用于响应组件中的动作
const actions = {
     jia(context,value){
          context.commit('JIA',value)
     },
     jian(context,value){
          context.commit('JIAN',value)
     },
     jiaOdd(context,value){
          if(context.state.sum % 2 !=0){
            context.commit('JIA',value)   
          }
          
     },
     jiaWait(context,value){
          setTimeout(() => {
               context.commit('JIA',value)
          }, 500);
          
     },
}
// 准备mutations-用于操作数据（state）
const mutations = {
     JIA(state,value){
          state.sum += value
     },
     JIAN(state,value){
          state.sum -= value
     },
}
// 准备satae -- 用于存储数据
const state = {
     sum:0,
     school:'尚硅谷'
}
// 准备getter-- 用于将state中的数据进行加工
const getters = {
     bigSum(state){
          return state.sum*10
     }
}
export default new Vuex.Store({
     actions,
     mutations,
     state,
     getters
})

Count.vue

<template>
    <div>
         <h1>当前求和为：{{sum}}</h1>
         <h1>当前求和放大10倍为：{{bigSum}}</h1>
         <h1>所在学校为：{{school}}</h1>
         <select v-model='value'>
              <option :value="1">1</option>
              <option :value="2">2</option>
              <option :value="3">3</option>
         </select>
         <!-- 当使用mapMutations和mapActions时，方法必须要带参数 -->
         <button @click='add(value)'>+</button>
         <button @click='sub(value)'>-</button>
         <button @click='addOdd(value)'>当前求和为奇数再加</button>
         <button @click='addWait(value)'>等一等再加</button>
    </div>

</template>

<script>
import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
export default {
     name:'Count',
     data(){
          return{
               value:1
          }
     },
     // 为了避免在插值语法中写太多公式代码,自己写计算属性
     computed:{
     // 自己写方法
          // sum(){
          //      return this.$store.state.sum
          // },
          // school(){
          //      return this.$store.state.school
          // },
     // 借助mapState生成计算属性，从state中读取数据（对象写法）
          // 注：下面不能写成简写形式，因为后面的sum是一个字符串，并不是一个变量
          // ...mapState({sum:'sum',school:'school'})
     // 借助mapState生成计算属性，从state中读取数据（数组写法） 
          // 数组里的sum有两个用途，一个是声明的计算属性叫sum，另一个是state中的变量名也叫sum
          ...mapState(['sum','school']),
     /******************************* */
     // 自己写方法
          // bigSum(){
          //      return this.$store.getters.bigSum
          // }   
     //使用 mapGetters
          // 对象写法
          // ...mapGetters({bigSum:'bigSum'})
          // 数组写法
          ...mapGetters(['bigSum'])              
     },
     methods:{
          // add(){
          //      // 可以直接跳过action层，直接访问commit
          //      // this.$store.dispatch('jia',this.value)
          //      this.$store.commit('JIA',this.value)
          // },
          // sub(){
          //       // 可以直接跳过action层，直接访问commit
          //      // this.$store.dispatch('jian',this.value)
          //       this.$store.commit('JIAN',this.value)
          // },
     // 使用mapMuations来取代上面的代码，生成对应的方法，方法中会调用communit去联系Mutations，进而做到简化的作用
          // 上面的两个方法是直接和mutations进行对话的，所以使用mapMutaition方法
           ...mapMutations({add:'JIA',sub:'JIAN'}),
         //还有数组的写法，但是需要方法名和commint中的名是一样的时候，才可以，例如：
          // ...mapMutations(['JIA','JIAN']),
     /********************************************** */
     // 使用mapActions来取代上面的代码，生成对应的方法，方法中会调用dispatech去联系Actions，
          // addOdd(){
          //      this.$store.dispatch('jiaOdd',this.value)
          // },
          // addWait(){
          //      this.$store.dispatch('jiaWait',this.value)
          // },
          ...mapActions({addOdd:'jiaOdd',addWait:'jiaWait'})
          // 同样也有数组的写法
     }     
}
</script>

<style>
button{
     margin-left: 5px;
}
</style>