javascript - 一段理解艰难的vue代码, 怎么修改得更易于理解

问题描述

问 题

看到如下代码,

1. 片段一中dispatch的第二个参数作为回调函数传递给了片段二的cb
2. 片段二中cb的第一个参数作为回调又反向传递给了片段一的cb
3. 片段一的response.data作为实参传递给了片段二的形参user,然后commit

不知道我理解的对不对.但是总感觉这段代码非常难以理解.... 求大神指教怎么修改更容易懂

xxx.vue:

const login = {
  data: () => ({
    access: '',
    password: '',
    error: null
  }),
  methods: {
    submit () {
      ... ...
      .then(response => {
        // !!!! 代码片段一
        this.$store.dispatch(USER_UPDATE, cb => {
          cb(response.data);
          this.$router.replace(this.$route.query.redirect || '/');
        });
        // end
      })
      .catch(({ response: { data = {} } }) => {
        ... ...
      });
    }
  }
};

xxx.store:

const actions = {
  [USER_UPDATE]: (context, cb) => {
    // !!! 代码片段二
    return cb(
      user => context.commit(USER_UPDATE, user),
      context
    )
    // end
  },
  ... ...
};

解决方案

1. 像楼上所说，submit过程放在action中处理
2. actions拿到数据后，直接通过commit处理数据

3. router的重定向操作有两种

   1. 通过某一个state进行控制，在组件中watch这个数据的变更，进行回调
   2. 观察者模式，订阅user update的事件，进行操作

这篇关于javascript - 一段理解艰难的vue代码, 怎么修改得更易于理解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！