Vuex引用未返回正确的值

Question

我在一个对象中引用一个VueX getter，如下所示：

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

store getter如下所示：

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);
     }
},