Vuex mapGetter的基本使用

getter相当于Vuex中的计算属性

对 state 做处理再返回
mapGetters 把 Store 中的 getters 映射到组件中的计算属性中

Store文件

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    msg: 'Hello world',

    count: 0

  },

  getters: {

    reverseMsg(state){

      return state.msg.split('').reverse().join('')

    }

  },

  mutations: {

  },

  actions:{

  },

  modules:{

  }

})

vue文件

<template>

  <div>

    <p>count: {{num}}</p>

    <p>msg: {{message}}</p>

    <p>Normal-reverseMsg: {{$store.getters.reverseMsg}}</p>

    <p>Getter-reverseMsg: {{reverseMsg}}</p>

    <p>Rename-msgBeReversed: {{msgBeReversed}}</p>

  </div>

</template>

<script>

import { mapState, mapGetters } from 'vuex'

export default {

  computed:{

    /**

      相当于

      num: state => state.count

      message: state => state.msg

     */

    ...mapState({num: 'count', message: 'msg'}),

    /**

      相当于

      reverseMsg: getters.reverseMsg

     */

    ...mapGetters(['reverseMsg']),

    /**

      重命名,防止与组件内data数据冲突

      相当于

      msgBeReversed: getters.reverseMsg

     */

    ...mapGetters({msgBeReversed: 'reverseMsg'})

  }

}

</script>

巴特西

Vuex mapGetter的基本使用

getter相当于Vuex中的计算属性

Store文件

vue文件

最新文章

热门文章