如何使用多个模块订阅商店的突变更改？

Question

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

在用户模块中，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) }
         })
  }
.......
}

我知道：In Vuex, we can subscribe store mutations. 我要订阅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
      }
    })
}

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

Answer 1

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

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