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一樣，不能直接在子組件里面修改它值，只能通過提交的方式來修改它的值。