Vuex更新状态

我的AXIOS请求可以返回对象或空集合,我想随时更新我的UsSerDayLIY项目。我控制台记录我的变异和getter,这是可行的,但对于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')) || [],

当我转到我的视图组件时

    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

                }