Vue 组件检查 vuex 存储状态属性是否已填充数据

Question

这是我的设置。状态中的状态“类别”是从 json 端点异步获取的。

在组件中我想使用这些数据，但如果我重新加载页面，类别总是空的。

methods: {
        onSubmit() {
            console.log(this.filter);
        },
        formCats(items) {
            console.log(items);
            // const arr = flatten(data);
            // console.log(arr);
        }
    },
    created() {
        const data = this.categories;

        this.formCats(data);
    },
    computed: {
        ...mapState(['categories'])
    }

我还尝试了 async created() 和 await this.categories。也没有按预期工作！如果有人可以帮助我，那就太好了。谢谢！

Answer 1

发生这种情况是因为异步获取直到组件已经加载后才完成。有多种方法可以解决这个问题，这是一种。删除created 并将formCats 方法转换为computed。

computed: {
  ...mapState(['categories']),
  formCats() {
    let formCats = [];
    if (this.categories && this.categories.length) {
      formCats = flatten(this.categories);
    }
    return formCats;
  }
}

formCats 一开始会是一个空数组，当this.categories 提取完成后它会立即变成你的格式化类别。