时间戳

首页 > 解决方案 > 如何订阅具有多个模块的商店的突变更改？

vue.js - 如何订阅具有多个模块的商店的突变更改？

问题描述

使用vue.js构建登录页面。在我的项目中，我将我的商店分为两个模块（用户、信息）。

在此处输入图像描述

在 User 模块中，actions.js旨在处理一些异步请求（如登录、注册），并提交相应的变异。

export const userActions = {
  login({commit}, loginUser) {
    commit(LOGIN)
    axios.post(`${ API_BASE_USER }/login`, loginUser)
         .then(res => {
           const { token } = res.data
           if (res.status == 200) { commit(LOGIN_SUCCESS, token) }
           else { commit(LOGIN_FAILURE, res.data) }
         })
  }
.......
}

我知道：在 Vuex 中，我们可以订阅存储突变。 我想订阅每个突变更改，Login.vue 以便我可以加载通知来告诉用户登录是否成功。

Login.vue

created () {
    this.$store.subscribe(mutation => {
      switch (mutation.type) {
        case LOGIN_SUCCESS:
          console.log('view success')
        // load success nitification
          break

        case LOGIN_FAILURE:
          console.log('view failure')
       // load success nitification
          break

        case LOGIN_WARNING:
          console.log('view warning')
          break
      }
    })
}

但这似乎行不通。是否不可能在具有多个模块的商店中订阅特定模块的突变？

标签： vue.jsvuex

解决方案

由于您使用存储模块的名称空间，因此在订阅时需要考虑它。例如：

created () {
    this.$store.subscribe(mutation => {
      switch (mutation.type) {
        case MODULE_NAME + '/' + LOGIN_SUCCESS:
          console.log('view success')
        // load success nitification
          break
        ...
      }
    })
}

推荐阅读