Состояние обновления Vuex - PullRequest
Новая
       5

Состояние обновления Vuex

1 голос
/ 02 февраля 2020

Когда я вызываю действие Vuex и выполняю запрос топора ios, это не обновляет весь мой элемент localStorage, это очень странно.

Мой запрос топора ios может вернуть объекты или пустую коллекцию, и я хотел бы постоянно обновлять мой userDailyFoods элемент. Я записываю в журнал свою мутацию и геттер, и это работает, но для обновления элемента localStorage это ошибка. Иногда я получаю результат, иногда нет.

Что я делаю не так?

действие: 

updateUserDailyFoods(context, data) {
  let date = data.data
  if (date) {
    axios.get(`/user/daily/food/${context.getters.user.id}/${date}/`).then(r => {
      context.commit('userDailyFoods', {
        userDailyFoods: r.data.data
      });
      localStorage.setItem('userDailyFoods', JSON.stringify(r.data.data));
    }).catch(e => {
      console.log(e)
    })
  }
  console.log(localStorage.getItem('userDailyFoods'));
}

мутация: 

userDailyFoods (state, payload) {
  if(payload) {
    state.userDailyFoods = payload.userDailyFoods
  }
},

геттер: 

userDailyFoods(state){
  return state.userDailyFoods
}

состояние: 

userDailyFoods: JSON.parse(localStorage.getItem('userDailyFoods')) || [],

ОБНОВЛЕНО

когда я go добавляю к моему компоненту вида 

computed: {
  userDailyFoods() {
    return this.$store.state.userDailyFoods
  },
}

и я консоль записываю в журнал свои действия: 

console.log(this.userDailyFoods)

затем результат обновляется после двух кликов, а не только одного. 

getDaySelected(day) {
  var day = moment(day).format('YYYY-MM-DD');
  this.$store.dispatch('updateUserDailyFoods', {
    data: day
  })
  console.log(this.userDailyFoods)
  this.$parent.$data.foods = this.userDailyFoods
}

1 Ответ

1 голос
/ 02 февраля 2020

(Ответьте по запросу) Возможно, значение каждый раз устанавливается в localStorage, но вы пытаетесь зарегистрировать его до завершения операции asyn c Ax ios. Переместите console.log в блок then: 

.then(r => {
    context.commit('userDailyFoods', {userDailyFoods: r.data.data});
    localStorage.setItem('userDailyFoods', JSON.stringify(r.data.data));
    console.log(localStorage.getItem('userDailyFoods'));
})

Ax ios (и AJAX в целом) асинхронный, что означает, что операция начинается отдельно от обычного синхронного потока кода. После его начала выполнение программы немедленно возобновляется, часто до завершения операции asyn c. В то время, когда вы входите в консоль, нет никакой гарантии, что это асин * обещание c будет решено.

Кроме того, нет необходимости в этом геттере, который вы можете рассматривать как вычислил, что ничего не вычисляет.

...