时间戳

首页 > 解决方案 > 如何更新依赖于另一个状态异步数据的状态数据

vue.js - 如何更新依赖于另一个状态异步数据的状态数据

问题描述

在 Nuxt 应用程序中，我有一个 Vuex 商店，它首先通过从外部 URL 获取一些“属性”。然后我想使用这些数据来更新另一个名为“位置”的状态元素，这些“属性”中的每一个都有一个“位置”，但我不知道如何在所有属性都被获取后运行它。

export const mutations = {
    updateProperties: (state, properties) => {
        state.properties = properties
    },
    updateLocations: (state) => {
        const locationsArr = [...new Set( state.properties.map( property => property.acf.location_tab_group.location_table.city ) )]
        state.locations = locationsArr;
    }
}

export const actions = {

    async getProperties({ state, commit }) {
        if (state.properties.length) return
        try {
            let properties = await fetch(
                `https://...`
            ).then((res) => res.json())

            properties = properties
                .filter((el) => el.status === 'publish')
                .map(({ id, slug, title, acf }) => ({
                    id,
                    slug,
                    title,
                    acf,
                }))
            commit('updateProperties', properties)
            
        } catch (err) {
            console.log(err)
        }
    },

    getLocations({state, commit}) {
        if(state.properties.length) {
            const locationsArr = [...new Set( state.properties.map( property => property.acf.location_tab_group.location_table.city ) )]
            commit('updateLocations', locationsArr)
        }
    }
}

所以基本上，我想知道如何在所有属性都被获取后才调用“updateLocations”突变。

标签： vue.jsvuejs2nuxt.jsvuex

解决方案

在任何操作中，dispatch都可以在上下文对象上使用。

如果我理解正确，你想确保getProperties在打电话之前至少被叫过一次getLocations吗？

这是你在想的吗？

    async getLocations({state, commit, dispatch}) {
        if(!state.properties.length) {
            await dispatch('getLocations');
        }
        const locationsArr = [...new Set( state.properties.map( property => property.acf.location_tab_group.location_table.city ) )]
        commit('updateLocations', locationsArr);
    }

推荐阅读