Vuex 업데이트 상태

Vuex 업데이트 상태

Vuex 작업을 호출하여 공리 요청을 수행할 때 로컬 스토리지 항목을 모두 업데이트하는 것이 아니라 매우 이상합니다.

내 공리 요청이 개체 또는 빈 컬렉션을 반환할 수 있으며 항상 업데이트하고 싶다.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
  }
},

getter:

userDailyFoods(state){
  return state.userDailyFoods
}

상태:

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

업데이트됨

내 뷰 구성요소로 이동할 때

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
}

(요청대로 답변)값은 매번 localStorage에서 설정되지만 비동기 Axios 작업이 완료되기 전에 로깅하려고 하는 경우이동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'));
})

Axios(및 일반적으로 AJAX)는 비동기식으로, 코드의 정상적인 동기 흐름과 별도로 작업이 시작된다는 것을 의미한다.시작 후 프로그램 실행은 비동기 작업이 완료되기 전에 즉시 재개된다.콘솔에 로그인할 때 이 비동기 약속이 아직 해결되었다는 보장은 없다.

게다가, 아무것도 계산하지 않는 컴퓨터라고 생각할 수 있는, 그 게이터는 필요 없다.

참조URL: https://stackoverflow.com/questions/60021983/vuex-update-state