前端笔记

分享前端开发思考与感悟

VueJS代理动作-模式改变者

所以过了一会儿into-大家新年快乐!为什么发布这个帖子?仅仅是因为作为一家公司,我们经历了很多独特的问题,需要提出有助于解决问题的新模式。

那是什么问题呢?

由于全局加载程序状态和其他原因,我们需要设计一种极其简单的方法来订阅活动的HTTP请求。

如果我们使用REST作为HTTP协议层,那么我们可以使用axios的拦截器来简单地对vuex模块进行更改,以跟踪HTTP事件的状态。我们可以通过创建一个对象来实现此目的,该对象的键代表HTTP事件名称(唯一的事件),并且值是真实的,二进制1或只是一些字符串。

然后,我们为该对象订阅按钮或加载器,以找到其负责的相应活动状态。这分散了对每个按钮或模式进行主动编码以保持加载程序状态的必要性,而给了我们以DRY方式编写代码的机会。

然而…

对于我们来说,并不是所有的事情都那么简单,因为我们使用的是graphql和apollo,并且我们以一种非常规的方式进行操作,在这里我们使用的是apollo GQL,而不是apollo状态,因此GQL请求是使用apollo发出的变异和查询,但数据响应存储在纯Vuex中。

主要问题不是阿波罗状态,问题在于,至少到目前为止,我们无法跟踪如何以与axios拦截器相同的方式来拦截GQL查询,并且每次都使用正确的元数据对Vuex进行突变,因此非常简单我们使用的解决方案是…. 击鼓 …创建代理行为

什么是代理动作?

从字面上讲,它是主要事件的代理。


async proxyAction({ dispatch }, { actionName, data, setLoading = true }) {
      dispatch('setLoading', setLoading, { root: true });
      try {
        const response = await dispatch(actionName, data, { root: true });
        dispatch('setLoading', false, { root: true });
        /* If response is not ok, show either the custom message
          sent from BE or the constant BE API error message
        */
        if (!response) {
          // For proxy action like, reset user state
          return true;
        }
        if (!response.ok) {
          if (response.customMessage) {
            this._vm.$toasted.error(response.customMessage);
          } else if (response.error) {
            this._vm.$toasted.error(BE_API_ERROR_MESSAGE);
          }
        }
        if (response.customReturn) {
          return response.customReturn;
        }
        return response.ok;
      } catch (e) {
        dispatch('setLoading', false, { root: true });
        this._vm.$toasted.error(BE_API_ERROR_MESSAGE);
        return false;
      }
    }

上面的代码片段显示了我们调度了setLoading操作,该操作的工作是将活动的HTTP请求二进制值切换为1或0(并且我们将加载器状态订阅了此操作)。此外,我们还分派了要执行的操作,即GQL HTTP查询。

这样一来,在整个项目中,我们都不需要在VueJS文件的JS部分的method对象中的mapActions传播运算符中添加多行。相反,您只需要执行以下操作:

...

methods: {

  ...mapActions({
      proxyAction: 'proxyAction',
    }),
}
...

每当调用CTA或需要执行某项操作时,您都可以执行以下操作

methods: {
 buttonCalled() {
    await this.proxyAction({
        actionName: 'user/followVaibhavOnLinkedin',
        data: {
          url: "https://linkedin.com/in/vaibhavnamburi",
        },
      });
 }
}

这样,如上所述,您不需要在mapActions中为所需的所有动作分配多行,而是只需通过文本将其添加并调用要调用的任何actionName并传递所需的任何数据即可通过!

希望这对您有所帮助!

如果您认为这是个有用的提示,请随时在Twitter / youtube上或其他任何想要的地方与其他人分享,也绝对可以给我加标签!(@veebuv )

PS:如果这种模式很常见,那么我在VueJS / Vuex社区中绝对不了解它,但是如果是这种情况,我希望被标记在原始讨论中,这样我就可以看到它们的完成情况它!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注