vuex 지속 상태를 사용하여 로컬 스토리지에 데이터 저장

vuex 지속 상태를 사용하여 로컬 스토리지에 데이터 저장

현재 이 플러그인 vuex-persistedstate를 사용하고 있습니다.

Nuxt 앱의 Vuex 모듈과 함께 사용하고 싶습니다.

기본적으로 로그인 모듈이 있습니다.성공하면authToken대한 반응에서 오는localStorage

제 코드는 다음과 같습니다.

import axios from "axios";
import createPersistedState from 'vuex-persistedstate';

export const state = () => ({
  signInAttrs: {
    email: "",
    password: ""
  },
  authToken: ""
});

export const mutations = {
  SET_AUTH_TOKEN(state, token) {
    state.authToken = token;


    createPersistedState({
      key: 'admin-auth-key',
      paths: [],
      reducer: state => ({
        authToken: '123123123'
      })
    })(store);
  }
};

export const actions = {
  signInAdmin({ commit }, context) {
    return axios.post(`${process.env.BASE_URL}/sign_in`, {
      email: context.email,
      password: context.password
    }).then(response => {
      commit('SET_AUTH_TOKEN', response.data.headers.token);
    }).catch(error => {
      console.log(`failed ${error}`);
    });
  }
};

export const getters = {
  signInAttrs(state) {
    return state.signInAttrs;
  },
  authToken(state) {
    return state.authToken;
  }
};

돌연변이 안에는SET_AUTH_TOKENAPI에서 파라미터로 토큰을 수신합니다.localStorage에 저장하는 방법

vuex-persisted state의 사용을 오해하고 계신 것 같습니다.스토어 플러그인에 추가하면(plugins: [createPersistedState()])는 localStorage 변수를 자동으로 업데이트합니다.vuex각 돌연변이 커밋에 스토어 복사본을 첨부합니다(예 참조).토큰이 안에 있어야 합니다.vuex.authToken에localStorage이미.

커스텀명을 사용해 변수를 격납하는 경우는, 플러그 인을 사용하지 않고 실행할 수 있습니다.localStorage.setItem('key', 'value')이 질문을 보세요.

언급URL : https://stackoverflow.com/questions/54399867/saving-data-to-local-storage-using-vuex-persisted-state