Vuex хранит странное поведение в компоненте

Question

Доступ к данным хранилища можно получить непосредственно из компонента, встроенного в HTML:

 {{$store.state.notificationArea.cart.total;}}

Это работает нормально, однако, оно не работает в вычисляемом атрибуте того же контроллера, что и:

computed: {
 total: function () {
     return this.$store.state.notificationArea.cart.total;
  }
}

Три дня пытались решить проблему, пожалуйста, помогите.

Answer 1

Вычисляемое свойство - это функция, которая возвращает значение, которое должно быть объявлено как total:function(){}, total:()=>{} или total(){}:

computed: {
 total:()=>{
     return  this.$store.state.notificationArea.cart.total;  
   }
}

И то свойство, на которое вы ссылаетесь, должно быть инициализированокак:

const state={
     notificationArea:{
                 cart:{
                    total:0,
                  }
            }
      }
....