用 getters 抽象 state

整個系列寫得太嚴肅了，這次在標題上小小的中二一下。

vuex 的 getters 用來展現欲望，展現想要使用資料的樣子。這個道理是基於 ADT 的設計。Web API 的 GET api 也是一樣的道理，所以 GET 通常會帶很多 query。也正因為如此，所以 facebook 後來推出了 GraphQL 我想也是為了滿足人類各式各樣的欲望，讓 GET 資料的方式更加彈性。

• 主管列表
• 在職人員列表

@/store/user/index.js

做在 mutation 存在 state

import actions from './actions';

export default {
  //...
  state: {
    leader_users: [],
    active_users: [],
  },
  mutation: {
    leaderUsers (state, users) {
      const leader_id_list = [...users.reduce((leaders, user) => {
          leaders.add(user.department.leader_id)
          return leaders;
        }, new Set())];
      state.leader_users = users.filter(user => leader_id_list.includes(user.id))
    },
    activeUsers (state, users) {
      state.active_users = users.filter(user => user.is_active)
    }
  },
  getters: {
    leaderUsers(state) {
      return state.leader_users;
    },
    activeUsers(state) {
      return state.active_users;
    }
  }
}

缺點

• 要資料，重發 API
• 要存在不同的 state 管理上會愈來愈多東西
  • 如果有一個畫面的下拉式選單，需要人員列表，同時也需要主管列表，那麼就要分開儲存
• 弱化了 getters 的重要性，
  • 不一定要寫 getters 要看需求。

@/store/user/index.js

做在 getters

import actions from './actions';

export default new Vuex.Store({
  //...
  getters: {
    leaderUsers (state) {
      const leader_id_list = [...state.list.reduce((leaders, user) => {
          leaders.add(user.department.leader_id)
          return leaders;
        }, new Set())];
      
      return state.list.filter(user => leader_id_list.includes(user.id))
    },
    activeUsers (state) {
      return state.list
        .filter(user => user.is_active)
    }
  }
})

個人偏愛這一種安排方式

優點

• 只要打一次 API 就可以一直用到爆
• state 唯一

缺點

• 複雜集中在 getters

不過這就是本質性問題！只能移動、隱藏，無法消滅

不過...正常的 leaders 屬於 department

部門主管，屬於 department 的 module

@/store/department/index.js

做在 getters

import actions from './actions';

export default new Vuex.Store({
  //...
  getters: {
    leaders (state, getters) {
      const leader_id_list = state.list.map(department => department.leader_id);
      return getters.users.filter(user => leader_id_list.includes(user.id))
    },
    // ...
  }
})