vuex中的getters的使用

1. 通過this.$store.getters來使用
   store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {
    count: 1
}
const getters={
    count(state){
        console.log(state.count)
    }
}
export default new Vuex.Store({
    state,mutations,getters
})

count.vue

<template>
  <div>
      <h3>{{$store.state.count}}========{{count}}</h3>
      <hr/>
      <p>
          <button @click="$store.commit('add',10)">+</button>
          <button @click="reduce(10)">-</button>
      </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    methods:{
        ...mapMutations(['add','reduce'])
    },
    watch:{
    //這裏是在監聽到count改編後，再調用getters中的方法
        count(){
            this.$store.getters.count
        }
    },
    computed:mapState(['count']),
    store
}
</script>
<style>
</style>

2. 通過mapGetters來使用

在這裏我妥協了
如果將…mapGettters放在methods中就會一直報錯
所以我直接放在computed中了
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {
    count: 1
}
const mutations={
    add(state,n){
        state.count+=n
    },
    reduce(state,n){
        state.count-=n
    }
}
const getters={
	//這裏我加了一個返回值
    count(state){
        console.log(state.count)
        return state.count
    }
}
export default new Vuex.Store({
    state,mutations,getters
})

count.vue

<template>
  <div>
      <h3>{{$store.state.count}}========{{count}}</h3>
      <hr/>
      <p>
          <button @click="$store.commit('add',10)">+</button>
          <button @click="reduce(10)">-</button>
      </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    methods:{
        ...mapMutations(['add','reduce']),
        
    },
    computed:{
        ...mapState(['count']),
        //需要和getters中的方法名稱一致
        ...mapGetters(['count'])
    },

    store
}
</script>
<style>
</style>