vuex之getter(二)

佚名 6年前 (2019-04-20) 随笔 1801人围观抢沙发百度已收录

说明

使用vue，如果想对data数据派生一些状态，我们就用到计算属性或者侦听器，同样vux想要派生state中的一些状态，可以在store中定义一个getters属性，它相当于state的计算属性。只有它的依赖发生改变了，它的值才会被重新计算。

基本使用
使用起来也非常的简单，第一个参数默认为state，第二个参数即为自己getters，通过这两个参数，我们可以访问state以及getters的数据。通过return返回计算的的结果即可，此时子组件可以通过$store.getters.xxx 访问此属性了

    var store = new Vuex.Store({
        state:{
            count: 0,
            msg: '你妈在哪里'，
            msg1: '在家'
        },

        getters: {
            msgFilter:  (state, getters) =>{
                return state.msg.replace('你妈', '妈妈')
            }
        }
    })
    //App组件
    <template>
      <div>
        <h2>App组件</h2>
        //这里输出 妈妈在哪里
        <h3>{{$store.getters.msgFilter}}</h3>
      </div>
    </template>

返回一个方法

有时候我们需要根据用户传入的值来返回特定的状态，此时我们可以让getters返回一个方法，可以向该方法传入我们的需要的数据。可以传入多个参数。

  getters: {
      msgFilter: (state, getters) =>{
          return state.msg.replace('你妈', '妈妈')
      },

      anwserMsg: state => (msg1, msg2) =>{
          return msg1 +  + msg2
      }

  }

  //App组件
  //打印 妈妈说：我在家，你在哪里？
  <h3>妈妈说：{{ $store.getters.anwserMsg('我在家，', '你在哪里？')}}</h3>

通过mapGetters映射成局部的computed

与mapState一样，需要改名字，就传入一个对象，否则传入一个数组

computed: {
  //把msgFilter 修改成了 msg1
  //  anwserMsg 修改成了 msg2
  ...mapGetters({
    msg1: 'msgFilter',
    msg2: 'anwserMsg'
  }),

  //默认原来的名字
  ...mapGetters([
    'msgFilter',
    'anwserMsg'
  ])
}