vuex之getter(二)

说明

• 使用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'
    ])
  }

• 注意： 它与state一样，不能直接在子组件里面修改它值，只能通过提交的方式来修改它的值。