Как использовать localStorage в axios запросе в vuex?

Question

[Алекс]

Как поправить конфигурацию?

import Vue from 'vue'
import axios from 'axios'
import vuex from 'vuex'
Vue.use(vuex, axios);

export default new vuex.Store({
    state: {
        ParamsAffiliate: '',
    },
    mutations:{
        setParams(state, payload){
            state.ParamsAffiliate = payload;
        }
    },
    actions: {
        async getParams({commit, state}){
            let response = await axios.get('/information/userbar');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        }
    }
});

Answer 1

[Михаил]

state: {
  ParamsAffiliate: JSON.parse(localStorage.getItem('params')),
},
mutations: {
  setParams(state, payload) {
    state.ParamsAffiliate = payload;
    localStorage.setItem('params', JSON.stringify(payload));
  }
},

Comments

[Алекс]

так я пробовал так не работает((

[Михаил]

Алекс, почему оно не работает?

[Алекс]

то есть без изменений, так же база подгружается

[Михаил]

Алекс, какая база

[Алекс]

Михаил, запрос к базе так же идет axios.get('/information/userbar/'); в локалсторж не сохраняется

[Михаил]

Алекс, сохраняется все
https://codesandbox.io/s/vue-template-xg5d8

[Алекс]

Михаил, ага, но так чет все равно не сохраняется
vuex

state: {
        ParamsAffiliate: JSON.parse(localStorage.getItem('ParamsAffiliate')),

    },
    mutations:{
        setParams(state, payload) {
            state.ParamsAffiliate = payload;
            localStorage.setItem('ParamsAffiliate', JSON.stringify(payload));
        }

    },
    actions: {
        async getParams({commit, state}){
            let response = await axios.get('/information/userbar/');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        },

component.vue

import { mapState } from 'vuex';
    export default {
        name: 'IdWeb',
        computed: {
            ...mapState([
                'ParamsAffiliate'
            ])
        },
        async mounted() {
            await this.$store.dispatch('getParams');

        },

    }

[Михаил]

Алекс, дебажьте

[Алекс]

сохраняется в локальное хранилище, но как то надо условие прописать не делать запрос axios если есть в локалсторж

[Михаил]

Алекс,

if (state.ParamsAffiliate) {
  return;
}

[Алекс]

Михаил, а куда конкретно условие вставить? в state?

[Михаил]

Алекс, в getParams

[Алекс]

Михаил,

actions: {
        async getParams({commit, state}){
            let response = await axios.get('/information/userbar/account');
            if (state.ParamsAffiliate) {
                return;
            }
            if (response.status === 200) {
                commit('setParams', response.data);
            }

        },

если все так, то запрос все равно есть

[Михаил]

Алекс,
-_- сами то читаете что пишете?

getParams() {
  // сделать запрос
  // проверить на существование ParamsAffiliate в state
}

[Алекс]

Спасибо!