如何在组件 vue 中抛出脚本之前完成状态

Question

虽然很简单，但我是前端新手。我有一个页面组件。我需要在计算组件之前获取数据。

import {mapActions, mapGetters} from 'vuex'
    
    export default {
    name: "notFoundPage",
      methods: {
        ...mapActions([
          'GET_SUBCATEGORIES_FROM_CATEGORIES'
        ]),
      },
      computed: {
        ...mapGetters([
            'SUBCATEGORIES'
            ]),
        subCategories() {
            // doing some calculations with already updated SUBCATEGORIES in store
            }
            return result;
        }
      },
      created() {
        this.GET_SUBCATEGORIES_FROM_CATEGORIES() 

> **// from here we go to store**

      },
      mounted() {
        this.GET_SUBCATEGORIES_FROM_CATEGORIES()
      }
    }

商店：

        let store = new Vuex.Store({
            state: {
                categories: [],
                subcategories: []
            },
            mutations: {
                SET_CATEGORIES_TO_STATE: (state, categories) => {
                    state.categories = categories;
                },
                SET_SUBCATEGORIES_TO_STATE: (state, subcategories) => {
                    state.subcategories = subcategories;
                }
            },
            actions: {
                GET_CATEGORIES_FROM_API({commit}) {
                    return axios('http://localhost:3000/categories',
                        {
                            method: "GET"
                        })

But here compiler returns to component. I do not have any idea, why it is not finishing this action. And after calculating the computed block in component it returns to this point. But I need 'SET_CATEGORIES_TO_STATE' already updated

    .then((categories) => {
                            commit('SET_CATEGORIES_TO_STATE', categories.data)
                        return categories;
                    }).catch((error) => {
                        console.log(error);
                        return error;
                    })
                },
                GET_SUBCATEGORIES_FROM_CATEGORIES({commit}) {
                    this.dispatch('GET_CATEGORIES_FROM_API').then(categories => {
                        let subs = categories.data.map(function(category) {
                            return category.subcategories.map(function(subcategory) {
                                return subcategory.name
                            })
                            })
                        commit('SET_SUBCATEGORIES_TO_STATE', subs)
                        return subs
                    })
                }
            },
            getters: {
                CATEGORIES(state) {
                    return state.categories;
                },
                SUBCATEGORIES(state) {
                    return state.subcategories;
                }
            }

Answer 1

如果您在计时和异步任务方面遇到困难，为什么不使用 async/await?

您想 wait 在 async 函数中（例如调用数据后端）直到数据被获取。然后你想manipulate/delete/change/add，用这些数据做任何你想做的事，然后在屏幕上显示结果。

重点是，Vue 是一个反应式框架，这意味着它会在计算完成后自行重新呈现（如果设置正确）内容。所以不用担心类似的事情。

说实话，这个问题问的很奇怪。而且您的代码很难阅读。有时后退两步并尝试另一种方式也不是错误的。

如何在组件 vue 中抛出脚本之前完成状态

How to full state before going throw script in component vue

vue.js

vuex