Vuex（二）：getters和actions

【getters】

　个人理解：getters类似vue对象中的计算属性，在.vue文件中通过 $store.getters.方法名(可选参数) 进行调用，在vuex中的store内，getters内部的计算方法的第一个参数一定是state，第二个参数一定是getters自身，接收到的传参放置于return的函数内

1. getters不传参的情况

<h2>{{$store.getters.powerCounter}}</h2>

getters: {
    powerCounter (state) {
      return state.counter * state.counter
    }
  }

2. getters传参的情况

<h2>{{$store.getters.morethanAge(16)}}</h2>

getters: {
    morethanAge (state) {
      return function (age) {
        return state.students.filter(s => s.age > age)
      }
    }
  },

3. getters调用自身其他计算方法

<h2>{{$store.getters.useSelf}}</h2>

getters: {
    useSelf (state, getters) {
      return getters.powerCounter + 1234
    }
  },

 

【actions】

  个人理解：Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.actions内方法的触发需要用$store.dispatch('方法名',可选参数)，在actions内部，context用于代替上下文，大致可以理解为state对象。

<button @click="actionClick">ChangeName</button>

actionClick () {
      let done = 'Done'
      this.$store.dispatch('changeName', done)
    }

//模拟异步
actions: {
    changeName(context, done) {
      setTimeout(() => {
        context.commit('changeName')
        console.log(done)
      }, 1000);
    }
  }