时间戳

首页 > 解决方案 > Vue.js 通过操作存储更改状态

vue.js - Vue.js 通过操作存储更改状态

问题描述

我尝试active使用新设置的 Vuex 存储来跟踪和更改状态，如下所示。

export default new Vuex.Store({
  state: {
    idToken: null,
    userId: null,
    user: null,
    active: null
  },
  mutations: {
    authUser(state, userData) {
      state.idToken = userData.token;
      state.userId = userData.userId;
    },
    storeUser(state, user) {
      state.user = user;
    },
    clearAuthData(state) {
      state.idToken = null;
      state.userId = null;
    }
  },
  actions: {
    setLogoutTimer({ commit }, expirationTime) {
      setTimeout(() => {
        commit("clearAuthData");
      }, expirationTime * 1000);
    },
    },
    login({ commit, dispatch }, authData) {
      axios
        .post("http://localhost:5000/login", {
          email: authData.email,
          password: authData.password,
          returnSecureToken: true
        })
        .then(res => {
          console.log(res);
          const now = new Date();
          const expirationDate = new Date(
            now.getTime() + res.data.expiresIn * 1000
          );
          localStorage.setItem("token", res.data.idToken);
          localStorage.setItem("userId", res.data.localId);
          localStorage.setItem("expirationDate", expirationDate);
          commit("authUser", {
            token: res.data.idToken,
            userId: res.data.localId
          });
          dispatch("setLogoutTimer", res.data.expiresIn);
        })
        .catch(error => {
          state.active = false; ### This does not work
          console.log(error);
        });
  }
});

如果用户尚未激活，我希望弹出一条错误消息。这就是我尝试更改活动状态的原因。导致错误的代码在代码中注释。

我的组件中的一个方法应该改变它：

  methods: {
    onSubmit() {
      const formData = {
        email: this.email,
        password: this.password
      };
      console.log(formData);
      this.$store.dispatch("login", {
        email: formData.email,
        password: formData.password
      });
    }
  }

当我输入错误的密码时，Vue 会输出：

store.js?a259:86 Uncaught (in promise) ReferenceError: store is not defined
    at eval (store.js?a259:86)

我在这里做错了什么？

标签： vue.jsstatevuex

解决方案

您应该将状态传递给 vuex 登录操作，以使其可用：

login({ commit, dispatch, state }, authData)

更好的方法是使用突变，因为 Vuex 不建议在突变处理程序之外更改活动状态，并且state在操作中主要用于检索值活动状态：

SET_ACTIVE(state, val){
  state.active = val
},

和：

login({ commit, dispatch }, authData){
    //...   
    commit('SET_ACTIVE', false)
}

推荐阅读