Vuex는 개발 도구를 통해 수동으로 커밋될 때까지 변경을 커밋하지 않습니다.

Vuex는 개발 도구를 통해 수동으로 커밋될 때까지 변경을 커밋하지 않습니다.

아래와 같이 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없어졌어요.

브라우저에는 다음과 같이 표시됩니다.

그러나 개발 도구를 통해 커밋하면 작동하며 상태가 지속됩니다.

SO에 대해 비슷한 성질의 질문을 하지만 이 질문에 답하지 마십시오.

vuex 커밋이 저장에 커밋되지 않음

Vue2 + Vuex 커밋이 실행되지 않음(Vue devtools 미포함)

Vuex 변환이 실행 중이지만 vue dev 도구에서 수동으로 커밋될 때까지 구성 요소가 업데이트되지 않음

어떻게 하면state.access_token코드를 통해 지속할 수 있습니까?잃어버린 페이지 새로 고침에 문제가 있습니다.state.access_token가치.

코드는 정상이며 Vuex는 성공적으로 데이터를 저장소에 "커밋"하고 있습니다.현재 발생하고 있는 문제는 Vuex(즉시 사용 가능)가 데이터를 localStorage에 유지하지 않기 때문입니다.이것은 "commit"라는 의미라고 생각합니다.질문의 코멘트에서 몇 번 언급했듯이 서드파티 패키지를 사용해야 합니다(대부분의 사용자는 Vuex-PersistedState를 사용하지만 커스터마이즈 가능하고 Typescript를 지원하므로 Vuex-Persist를 선호합니다).둘 다 시작하기에 매우 쉽습니다.

Vuex-PersistedState에서는 새 플러그인으로 Vuex 초기화를 업데이트해야 합니다.다음과 같이 표시됩니다.

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

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

언급URL : https://stackoverflow.com/questions/57169975/vuex-does-not-commit-changes-until-its-committed-manually-via-dev-tools