Vuex不会提交更改,直到通过开发工具手动提交为止

时间:2019-07-23 18:10:49

标签: javascript vue.js vuejs2 vuex vuex-modules

我有一个名为login.js的vuex存储模块,如下所示

import axios from "axios";
import router from "@/router";

axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT;

const state = {
  access_token: localStorage.getItem("access_token") || null,
};

const getters = {
  loggedIn() {
    return (
      state.access_token != null && localStorage.getItem("access_token") != null
    );
  }
};

const mutations = {
  doLogin(state, response) {
    const token = response.authentication_data.access_token;
    localStorage.setItem("access_token", token);
    state.access_token = token;
    router.push("/admin");
  };

const actions = {
  async getToken({ commit }, userdata) {
    let email = userdata.email;
    let password = userdata.password;
    let remember_me = userdata.remember_me;

    await axios
      .post("auth/login", null, {
        params: {
          email,
          password,
          remember_me
        }
      })
      .then(response => {
        if (response.data.meta.status == "true") {
          commit("doLogin", response.data);
        } else {
          alert("wrong password");
        }
      })
      .catch(error => {
        alert(error);
      });
  };

export default {
  state,
  getters,
  actions,
  mutations
};

login.vue代码

  methods: {
    ...mapActions(["getToken"]),
    login() {
      const userdata = {
        email: this.email,
        password: this.password,
        remember_me: true
      };

      this.getToken(userdata);
    }
  }

登录功能有效,并且第一次设置了令牌,但是当我刷新浏览器时,access_token消失了。

在浏览器中,如下所示

enter image description here

但是,如果我通过开发工具提交,它将起作用,并且状态变为持久。

关于SO的性质相似的问题,但不回答此问题。

vuex commit does not commit to store

Vue2 + Vuex Commit Not Committing (without Vue devtools)

Vuex Mutation running, but component not updating until manual commit in vue dev tools

如何通过代码使state.access_token持久化?问题出在页面刷新上,我失去了state.access_token值。

1 个答案:

答案 0 :(得分:1)

您的代码很好,Vuex已成功将您的数据“提交”到商店。您遇到的问题是由于Vuex(开箱即用)无法将数据持久保存在localStorage中,我相信这就是您所说的“提交”。正如您在问题评论中多次提到的那样,您将需要使用第三方软件包(大多数人使用Vuex-PersistedState,但我更喜欢Vuex-Persist,因为它更具可定制性并支持Typescript) 。任一种都很容易上手。

使用Vuex-PersistedState,您需要使用新插件更新Vuex初始化。它应该看起来像这样:

import createPersistedState from 'vuex-persistedstate' // import the package

const store = new Vuex.Store({
  plugins: [createPersistedState()] /// include the imported plugin
})