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

Question

我一直在使用... mapGetters在我的解决方案中取得了很大的成功，但是现在我需要直接在data（）部分访问变量，似乎在访问时没有设置/准备变量..

mapGetters位于computed：{}部分..

调试时我注意到data（）在计算之前运行，所以..我需要在某种程度上放一块手表吗？

代码：

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将非常​​有用。