vuex學習

2018年過去了，2019年來臨。希望新的一年能收穫更豐富的經驗，代碼更加成熟。

Module

今天來記錄下自己在vuex中module這一章的學習時所遇見的問題。想要使用module的原因也是因爲，之前只建立一個全局的store對象，之後state對象裏的屬性越來越多，不利於以後的維護和後續的開發。

理所當然的從官方文檔進行學習，通篇看下來，大致都清楚了。如何將store模塊化，模塊化以後如何使用state,action,getter。但是就是沒有說如何直接使用模塊化後的commit。雖然可以直接通過action提交commit，但是我本人比較軸，所以想研究下怎麼在模塊化（使用module）後直接使用commit來調用mutation？

結果: 經過查找後得出,module模塊只是將state的時候進行模塊化區分,mutation,getter,action都不變。因此在給不同的module寫mutation或action的時候，命名不能重複。

Getter

根據文檔解讀出來，getter主要是用於管理state對象中的一些狀態派生出來的狀態管理。可以看做getter爲vuex中的computed屬性，getter的返回值會根據他的依賴緩存起來，只有依賴變化才重新被計算。

代碼

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)
    }
  }
})

上面代碼可以得知,doneTodos是基於state中的todos的狀態派生出來的。

注意：

1. getter可以返回一個屬性，也可以返回一個函數。這種情況不會被緩存，因爲其內容不僅與依賴屬性有關，還與傳參有關。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}