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

Question

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

我运行不得不在代码中做一些小的重复，我觉得这种方法很糟糕。我希望我只是看到了一些错误，而这并不是这种设计模式的缺点。（我是 Flux 设计模式的新手）

情况如下：我正在读出数据源，并获取用户列表。一旦从 API.

中 return 用户被设置到他们自己的状态对象上

Actions -> API -> Mutation -> State

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

如果我 return 状态预计算，那么对于我需要调用 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;
},

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

Answer 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

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

Where to put pre- state setting mutations in Flux Design Pattern

javascript

flux

vue.js

vuex