VUE：通过计算的 mapGetters() 在 data() 部分访问它时状态变量未定义

Question

我在我的解决方案中大量使用 ...mapGetters 并取得了成功，但现在我需要直接在 data() 部分访问变量，似乎变量不是 set/ready 访问时..

mapGetter 在 computed:{} 部分..

调试时我注意到 data() 在 computed: 之前运行，所以..我需要在这里以某种方式放置手表吗？

代码：

data(){
        return {
            FiltersVisible: false,
            orderList: {
                currentPage: 1,
                totalPages: ordersCount / 20,
                // totalPages:80,
                itemsPerPage: 20
            }
        }
    },
    computed: {
        ...mapGetters(['orders', 'ordersCount'])
        // ...mapGetters(['orders'])
    },

Vue状态截图(Chrome)

请注意，getter 已正确初始化....

Answer 1

有很多方法可以解决这个问题。您可以创建一个 Vuex getter，它为您提供一个空值或默认值作为开始。这将至少确保没有错误，并且只要您的商店开始运作，它就会更新。

您可以创建一个本地计算属性并使用 mapGetter 获取您的存储值，这样您还可以提供默认值。

您可以将 totalPages 设置为 0，并在您的存储值发生变化时使用观察器更新该值。

这真的取决于上下文。例如，如果您需要为检索值的其他组件使用相同的默认回退，Vuex getter 将很有帮助。

VUE：通过计算的 mapGetters() 在 data() 部分访问它时状态变量未定义

VUE : state variable undefined when accessing it in data() section through computed mapGetters()

vue.js

vuejs2

vuex