用 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))
    },
    // ...
  }
})