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

Question

我一直在我的解决方案中成功地使用 ...mapGetters，但现在我需要直接在 data() 部分中访问变量，访问时变量似乎没有设置/准备好..

mapGetter 位于 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 将很有帮助。