Ссылка Vuex не возвращает правильное значение

Question

Я ссылаюсь на получатель VueX в объекте, например, так:

computed : {
    ...mapGetters(['activeLayer']),
}

Получатель хранилища выглядит так:

getters : {
    activeLayer : state => state.views[state.activeView].layers[state.views[state.activeView].activeLayer]
}

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

created {
    var that = this;
    this.$store.watch( function(state) {return state.views[state.activeView].activeLayer}, 

        function() {
            console.log(that.activeLayer); // Returns initial value
            that.$store.state.views[this.$store.state.activeView].layers[this.$store.state.views[this.$store.state.activeView].activeLayer]; // Returns correct value
        }

    ,{ deep: true } )
}

Проблема в том, что при изменении хранилища activeLayer не обновляется до нового значения.

Как заставить activeLayer обновить?

Answer 1

Попробуйте использовать mapState вместо этого, и наблюдение за изменениями будет выглядеть так:

import { mapState } from 'vuex';

computed: { ...mapState(['activeLayer']), }

watch: {
     activeLayer(newValue, oldValue) {
          console.log(newValue);
     }
},