vuex入门(五)

• getters用于封装store中的共享数据

// store
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {  
  },
  getters: {
    showNum(state){
      return '当前数量为 ==> [' + state.count + ']'
    }
  },
  modules: {
  }
})
 
//子组件
<template>
  <div>
    {{$store.getters.showNum}}
  </div>
</template>

• getters使用方式2

// store中封装一个getters
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {  
  },
  getters: {
    showNum(state){
      return '当前数量为 ==> [' + state.count + ']'
    }
  },
  modules: {
  }
})
 
// 子组件中引入mapGetters函数，通过函数将store中的getters函数映射到该组件作为一个计算属性
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(['showNum'])
  }
};
</script>
 
// 直接使用
<template>
  <div>
    {{showNum}}
  </div>
</template>