在 Flux 设计模式中放置预状态设置突变的位置答案

【问题标题】：Where to put pre- state setting mutations in Flux Design Pattern在 Flux 设计模式中放置预状态设置突变的位置
【发布时间】：2020-11-29 12:42:02
【问题描述】：

我正在使用 Flux 设计模式在 Vue 中使用 Vuex 开发一个应用程序。

由于不得不在代码中进行少量重复，我遇到了我认为不好的方法。我希望我只是看到了一些错误，而这并不是这种设计模式的缺点。（我是 Flux 设计模式的新手）

情况如下：我正在读取数据源，并获取用户列表。一旦从 API 返回，用户就会被设置到他们自己的状态对象上。

动作 -> API -> 变异 -> 状态

但是，列表中的每个用户都需要进行一些拉取时间计算。例如，我们有每个用户的出生日期，但我需要知道他们的年龄。由于变异方法不能调用其他变异方法，所以我不能让setUsers 变异调用另一个变异来获取年龄，然后再将列表分配给状态。

如果我返回状态预计算，那么对于我需要调用setUsers 的任何地方，我都必须遍历用户，并为每个用户调用单独的突变来设置年龄而不是类似的东西这在突变中：

setUsers(state,users) {
  state.users = setAgeData(users);
},
setAgeData(users) {
  users.forEach(user => {
    user.age = getAge(user.dob);
  });
  return users;
},
getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
},

有没有更好的方法在返回状态之前进行动态计算？

【问题讨论】：

@tony19 你会把函数放在哪里？我对 Vue 比较陌生，所以也许这是一个愚蠢的问题，但我不相信我可以使用 mixin，你会不会将它们添加到突变导出的末尾？
对，您不会使用 Vue mixin，因为它不适用于此处，但从技术上讲，您可以使用常规 mixin、本地函数或导入的功能。我将在答案中提供一个示例。

标签： javascript vue.js vuex flux

【解决方案1】：

setAgeData() 和 getAge() 实际上不是突变（它们与突变的签名不匹配）。它们应该只是setUsers() 调用的实用函数（移到商店外），我认为这没有任何问题。

例如，您可以将setAgeData() 和getAge() 移动到本地函数中：

// store/index.js
function setAgeData() {/*...*/}
function getAge() {/*...*/}

export default new Vuex.Store({
  mutations: {
    setUsers(state, users) {
      state.users = setAgeData(users)
    }
  }
})

或者您可以将它们移动到要导入的单独文件中：

// store/user-utils.js
export function setAgeData() {/*...*/}
export function getAge() {/*...*/}

// store/index.js
import { setAgeData } from './user-utils'

export default new Vuex.Store({
  mutations: {
    setUsers(state, users) {
      state.users = setAgeData(users)
    }
  }
})

demo

【讨论】：