const state = {
xxx: initValue
}

const mutations = {
xxx(state, {data1}) {
// 更新 state 的某個(gè)屬性
}
}

const actions ={
zzz ({commit, state}, data1){
commit('xxx', {data1})
}
}

const getters ={
xxx(state) {
return ...
}
}

import { createStore} from "vuex";
export default createStore({
    //vuex中的數(shù)據(jù)源,我們需要保存的數(shù)據(jù)就保存在這里，可以在組件通過 this.$store.state來獲取我們定義的數(shù)據(jù)；
    state: {
        count: 0,
        age: 0
    },
    /*
      (1)Getter相當(dāng)于vue中的computed計(jì)算屬性，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算
      (2)通過屬性訪問Getter會(huì)暴露為 store.getters 對(duì)象，可以以屬性的形式訪問這些值：this.$store.getters.xxx
      (3)Getters 可以用于監(jiān)聽state中的值的變化，返回計(jì)算后的結(jié)果
    */
    getters: {
        getterAge(state){
            return state.age =25
        }
    },
    /*
       更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，并且Mutation 必須是同步函數(shù)
       在sotre.js中定義mutations對(duì)象，該對(duì)象中有兩個(gè)方法，mutations里面的參數(shù)，第一個(gè)默認(rèn)為state，
       其中第二個(gè)參數(shù)obj在官方文檔就是載荷（payload），可以傳入?yún)?shù)及對(duì)象。
       在大多數(shù)情況下，載荷應(yīng)該是一個(gè)對(duì)象，這樣可以包含多個(gè)字段并且記錄的 mutation 會(huì)更易讀
     */
    mutations: {
        addCount(state,obj){
            return state.count += obj.num
        },
        subCount(state,obj){
            return state.count -= obj.num
        }
    },
    actions: {
        addCountAsyn(context){
            setTimeout(()=>{
                context.commit('addCount',{
                    num: 1
                })
            },3000)
        },
        subCountAsyn(context){
            setTimeout(()=> {
                context.commit('subCount',{
                    num: 1
                })
            },2000)
        }
    }
})

<template>
  <div>
    <h2>通過getter獲得計(jì)算后的年齡：{{ getterAge }}</h2>
    <p>Count：{{ count }}</p>
    <button @click="handlerAdd()">加1</button>
    <button @click="handlerSub()">減1</button>
    <button @click="handlerAddAnys()">異步增加(2s后執(zhí)行)</button>
    <button @click="handlerSubAnys()">異步減少(2s后執(zhí)行)</button>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  computed: {
    count(){
      return this.$store.state.count
    },
    getterAge(){
      return this.$store.getters.getterAge
    }
   },
  methods: {
    handlerAdd(){
      this.$store.commit("addCount",{
        num: 1
      })
    },
    handlerSub(){
      this.$store.commit("subCount",{
        num: 1
      })
    },
    handlerAddAnys(){
      this.$store.dispatch('addCountAsyn')
    },
    handlerSubAnys(){
      this.$store.dispatch('subCountAsyn')
    }
   }
}
</script>

count(){
     return this.$store.state.count
},

...mapState([
  'count'
]),

getterAge(){
  return this.$store.getters.getterAge
}

...mapGetters(['getterAge'])    

handlerAdd(){
  this.$store.commit("addCount",{
    num: 1
  })
},
handlerSub(){
  this.$store.commit("subCount",{
    num: 1
  })
},

...mapMutations({
  handlerAdd: 'addCount',
  handlerSub: 'subCount'
})

handlerAddAnys(){
  this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){
  this.$store.dispatch('subCountAsyn')
}

...mapActions({
  handlerAddAnys: 'addCountAsyn',
  handlerSubAnys: 'subCountAsyn'
})