getters基本使用

//  @/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 9
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// vue页面

<div>获取store的counter：{{$store.state.counter}}</div>
<div>通过getter获取counter的平方：{{$store.getters.powerCounter}}</div>

结果：

getters参数

//  @/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    student: [
      {name: 'tom', age: 11},
      {name: 'why', age: 2},
      {name: 'red', age: 9},
      {name: 'yellow', age: 13},
    ]
  },
  getters: {
    // 第一个参数为state
    more12stu(state) {
      return state.student.filter(e => e.age > 12)
    },
    // 第一个参数为getters
    more12stuLen(state, getters) {
      return getters.more12stu.length
    },
    // 如果调用时，有额外的传参，要通过返回函数获取
    moreAgestu(state, getters) {
      return function(age) {
        return state.student.filter(e => e.age > age)
      }
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// vue页面

<div>获取年龄超过12的学生：{{$store.getters.more12stu}}</div>
<div>获取年龄超过12的学生的个数：{{$store.getters.more12stuLen}}</div>
<div>获取年龄超过Age的学生：{{$store.getters.moreAgestu(10)}}</div>

结果：