DAY8 资料室--Vuex的那些方法

前言

昨天我们在 Vuex 入门研究了 State 、 Mutation 的功能与使用方法
只是想提醒各位捧由，昨天的范例并不完全是正确用法哦！　

由这张 Vuex 官方提供的图片，我们可以发现，Vue 的元件应该透过 Action 触发 Mutation 进而修改 State 的资料，而不是直接使用 commit()
那到底要怎麽做呢？今天就让我们来说说还没提到的 Getter & Action 吧！

Action

今天若是使用 Vue，方法应该写在 methods，而修改资料也是在 methods，可是在 Vuex 却将两个功能拆开了，拆成如何呢？

在 Vuex 的世界中，只要修改资料就必须透过 Mutation 中的方法，这是不变的真理。
而 Action 跟 Mutation 有87%相似，不同在於：

• Action 无法直接变更资料状态，而是需要透过 Mutation。
• Action 可以包含非同步操作。

最简单的分别方法就是，Action 非同步，Mutation 同步。

来个简单的 Action 范例吧!

export default new Vuex.Store({
   state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

从范例中可以看到，我们将修改 state 的方法写在 mutations。
接着透或 actions 来使用 mutations 的方法。

看到这个范例，我们应该满疑惑，为什麽在 actions 中是使用 context.commit，而不是store.commit呢？
根据官方文件所说，context 是一个与 store 实例具有相同方法和属性的对象。
等後续介绍到 Modules 时，我们就知道 context 对象为什麽不是 store 实例本身了。

Action 要如何触发呢？

很简单，Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

Getter

Getter 是 Vuex 中的计算属性，跟我们平常在 Vue 中使用的 computed 很像，需要 return 回传值。
Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

我们可以看到这个简单的 Getter 范例：
资料中有一个 todos 清单，需要过滤已完成的项目

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getter 接受 state 作为其第一个参数，经过 filter 计算处理後回传值。
在这个范例中便在 Getter 使用 filter 过滤出 todos 已经做完的项目，并回传。

我们也可以很简单的在元件中以 this.$store.getters 使用他

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

结语

所以今天我们对於 Getter & Action 也有基础的认识了，可喜可贺！
明天我们来简单的创造一个完整的 store 范例，尝试实际运作Vue Components → Actions → Mutations → State 这四个状态循环吧！