vue.js - 关于 Vuex 状态管理的问题

问题描述

问 题

项目中使用了 vuex，需要对用户的一些操作做出及时通知，比如用户登录成功、失败的状态。
以下是 store 的部分代码：

export default {
  state: {
    signin: {
      success: false,
      failure: null
    },
    signout: {
      success: false,
      failure: null
    },
    getuser: {
      success: false,
      failure: null
    },
    auth: {
      user: global.JSON.parse(global.localStorage.getItem('auth_user')),
      access_token: global.JSON.parse(global.localStorage.getItem('access_token')),
      refresh_token: global.JSON.parse(global.localStorage.getItem('refresh_token')),
      check() {
        return this.access_token;
      }
    },
    queryUsers: []
  },
  getters: {
    access_token: state => {
      return state.auth.access_token;
    },
    refresh_token: state => {
      return state.auth.refresh_token;
    },
    user: state => {
      return state.auth.user;
    }
  },
  mutations: {
    ACCOUNT_SIGNIN_INIT: (state) => {
      Vue.set(state.signin, 'success', false);
      Vue.set(state.signin, 'failure', null);
    },
    ACCOUNT_SIGNIN_SUCCESS: (state, data) => {
      Vue.set(state.signin, 'success', true);
      Vue.set(state.signin, 'failure', null);
      Vue.set(state.auth, 'access_token', data.access_token);
      Vue.set(state.auth, 'refresh_token', data.refresh_token);
      global.localStorage.setItem('access_token', global.JSON.stringify(data.access_token));
      global.localStorage.setItem('refresh_token', global.JSON.stringify(data.refresh_token));
    },
    ACCOUNT_SIGNIN_FAILURE: (state, data) => {
      Vue.set(state.signin, 'success', false);
      Vue.set(state.signin, 'failure', data);
      Vue.set(state.auth, 'access_token', null);
      Vue.set(state.auth, 'refresh_token', null);
      global.localStorage.removeItem('access_token');
      global.localStorage.removeItem('refresh_token');
      global.localStorage.removeItem('auth_user');
    },
    ACCOUNT_GET_USER_SUCCESS: (state, data) => {
      Vue.set(state.getuser, 'success', true);
      Vue.set(state.getuser, 'failure', null);
      Vue.set(state.auth, 'user', data);
      global.localStorage.setItem('auth_user', global.JSON.stringify(data));
    },
    ACCOUNT_GET_USER_FAILURE: (state, data) => {
      Vue.set(state.getuser, 'success', false);
      Vue.set(state.getuser, 'failure', data);
    },
    ACCOUNT_SIGNOUT_SUCCESS: (state) => {
      Vue.set(state.signout, 'success', true);
      Vue.set(state.signout, 'failure', null);
      Vue.set(state.auth, 'access_token', null);
      Vue.set(state.auth, 'refresh_token', null);
      global.localStorage.removeItem('access_token');
      global.localStorage.removeItem('refresh_token');
      global.localStorage.removeItem('auth_user');
    },
    ACCOUNT_SIGNOUT_FAILURE: (state, data) => {
      Vue.set(state.signout, 'success', false);
      Vue.set(state.signout, 'failure', data);
    }
  },
  actions: {
    /**
     * 初始化账户模块
     * @param commit
     */
    signInit({ commit }) {
      commit(types.ACCOUNT_SIGNIN_INIT);
    },
    /**
     * 登录账户
     * @param commit
     * @param params
     */
    signIn({ commit }, params) {
      api.account.sign_in(params).then((response) => {
        commit(types.ACCOUNT_SIGNIN_SUCCESS, response.data);
      }).catch((error) => {
        console.log(error);
        commit(types.ACCOUNT_SIGNIN_FAILURE, error.response.data);
      })
    },
    /**
     * 获取用户信息
     * @param commit
     */
    getUser({ commit }) {
      api.account.get_user().then((response) => {
        commit(types.ACCOUNT_GET_USER_SUCCESS, response.data);
      }).catch((error) => {
        commit(types.ACCOUNT_GET_USER_FAILURE, error.response.data);
      })
    },
    queryUser({ commit }, params) {
      api.account.query_user(params).then((response) => {
        commit(types.SET_QUERY_USERS, response.data);
      }).catch((error) => {
        commit(types.SET_QUERY_USERS, error.response.data);
      });
    },
    /**
     * 注销登录
     * @param commit
     */
    signOut({ commit }) {
      commit(types.ACCOUNT_SIGNOUT_SUCCESS);
    }
  }
}

如上所示我想监控每个 api 请求的状态，我就得多创建两个用于保存请求结果的属性，并且在分发请求的地方要 watch 响应的 state，代码如下：

computed: mapState({
      sign_success: state => state.account.signin.success,
      sign_failure: state => state.account.signin.failure,
      get_user_success: state => state.account.getuser.success,
      get_user_failure: state => state.account.getuser.failure,
    }),
    watch: {
      sign_success: 'signinSuccess',
      sign_failure: 'signinFailure',
      get_user_success: 'getUserSuccess',
      get_user_failure: 'getUserFailure',
    },
    methods: {
      submitForm(signin) {
        this.$refs[signin].validate((valid) => {
          if (valid) {
            this.$store.dispatch('signIn', this.params);
          }
        });
      },
      signinSuccess(val, oldVal) {
        if (val && !oldVal) {
          this.$store.dispatch('getUser');
        }
      },
      getUserSuccess(val, oldVal) {
        if (val && !oldVal) {
          this.$router.go({
            path: '/'
          });
        }
      },
      getUserFailure(val, oldVal) {
        if (val && !oldVal) {
          this.$message.error('获取用户信息失败,请联系管理员');
        }
      },
      signinFailure(val, oldVal) {
        if (val && !oldVal) {
          this.$message.error('您输入的用户名或密码有误！');
        }
        this.$store.dispatch('signInit');
      }
    },
    beforeCreate() {
        this.$store.dispatch('signInit');
    }

请问有没有什么更简单的方法，能让分发请求的地方直接获响应结果？

解决方案

computed会响应state的变化，不需要再watch了

这篇关于vue.js - 关于 Vuex 状态管理的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！