Не могу получить конкретные данные из vuex в компонентах

Question

Я могу получить все данные из vuex, кроме одного, и что меня больше удивляет, так это то, что я могу получить данные в Chrome, только в Chrome.

Уже пробовал разные подходы, переключение между localalstorage и vuex-persistedstate, все ещене могу понять.

Это мое состояние vuex:

state: {
  statusOptions:JSON.parse(localStorage.getItem('optionsStatus')),
},

Запрос Axios:

axios({
  url: 'http://10.80.101.187:8081/api/directory/presencestatus',
  method: 'POST',
})
  .then((resp) => {
    console.log(resp.data)
    localStorage.setItem('optionsStatus',JSON.stringify(resp.data));
   });

this. $ store.state.statusOptionsперехватывать данные в компонентах

Вот так я получаю данные с сервера и отправляю их на vuex.

В консоли я могу проверить, что я получил данные с сервера, а также могу увидеть их в vuex, ноон пуст в компонентах.

0: {id_ref_catalog: 392, rus_name_catalog: "here"}

1: {id_ref_catalog: 393, rus_name_catalog: "diner"}

2: {id_ref_catalog: 394, rus_name_catalog: "away"}

Также для сохранения данных из vuex во время обновления я использую плагин vuex-persistedstate

Answer 1

Вы должны использовать vuex в правильной форме.Используйте мутацию, действие.Установите ваше начальное состояние в statusOptions: [], а затем вы отправите мутацию, которая вызовет действие, и это действие должно зафиксировать изменения в хранилище vuex со значениями из ответа API.

state: {
  statusOptions: []
}

тогда вам нужно выполнить действие

mutations: {
    update (state, payload) {
      state.statusOptions = payload
    }
  },

actions: {
getDataFromAPI() {
      return axios({
    url: 'http://10.80.101.187:8081/api/directory/presencestatus',
                        method: 'POST',
                    });

     }

А затем в вашем методе mount () вы можете вызвать

mounted() {
   this.getDataFromAPI().then( resp => { this.$store.commit('update', JSON.stringify(resp.data))})
}

Это какой-то пример,Это неправильный синтаксис, но попробуйте.