vue.js: переменная состояния mutating не завершена до запуска второго api-вызова, которому требуется значение [duplicate]

Самый простой ответ:

tableB = pd.concat([tableB, pd.Series(1)], axis=1)
mergedTable = tableA.merge(tableB, how="left" on="key")

answer = mergedTable[mergedTable.iloc[:,-1].isnull()][tableA.columns.tolist()]

Должен быть и самый быстрый.

56
задан Daniel Park 20 October 2016 в 22:51
поделиться

2 ответа

actions в Vuex являются асинхронными. Единственный способ позволить вызывающей функции (инициатору действия) знать, что действие завершено, - это вернуть обещание и разрешить его позже.

Вот пример: myAction возвращает Promise ], делает http-вызов и разрешает или отклоняет Promise позже - все асинхронно

actions: {
    myAction(context, data) {
        return new Promise((resolve, reject) => {
            // Do something here... lets say, a http call using vue-resource
            this.$http("/api/something").then(response => {
                // http success, call the mutator and change something in state
                resolve(response);  // Let the calling function know that http is done. You may send some data back
            }, error => {
                // http failed, let the calling function know that action did not work out
                reject(error);
            })
        })
    }
}

Теперь, когда ваш компонент Vue инициирует myAction, он получит этот объект Promise и может узнать, преуспел или нет. Вот пример кода для компонента Vue:

export default {
    mounted: function() {
        // This component just got created. Lets fetch some data here using an action
        this.$store.dispatch("myAction").then(response => {
            console.log("Got some data, now lets show something in this component")
        }, error => {
            console.error("Got nothing from server. Prompt user to check internet connection and try again")
        })
    }
}

Как вы можете видеть выше, для actions очень полезно возвратить Promise. В противном случае инициатор действия не сможет узнать, что происходит, и когда ситуация достаточно стабильна, чтобы что-то показать в пользовательском интерфейсе.

И последнее примечание к mutators - как вы правильно указали, они синхронны. Они меняют материал в state и обычно вызываются из actions. Нет необходимости смешивать Promises с mutators, поскольку actions обрабатывает эту часть.

Изменить: Мои представления в цикле Vuex однонаправленного потока данных:

Если вы получаете доступ к данным типа this.$store.state["your data key"] в ваших компонентах, то поток данных является однонаправленным.

Обещание от действия только для того, чтобы компонент знал, что действие завершено.

Компонент может либо взять данные из функции разрешения обещаний в приведенном выше примере (не однонаправленный, поэтому не рекомендуется), либо непосредственно из $store.state["your data key"], который является однонаправленным и следует за жизненным циклом данных vuex.

В приведенном выше абзаце предполагается, что ваш мутатор использует Vue.set(state, "your data key", http_data), как только HTTP-запрос завершен в вашем действии.

106
ответ дан Mani 18 August 2018 в 18:32
поделиться
  • 1
    @ceejayoz Согласовано, государство должно быть единственным источником правды для всех объектов данных. Но обещание - это единственный способ связаться с инициатором акции. Например, если вы хотите показать «Повторить попытку», после ошибки http, эта информация не может войти в состояние, но может быть передана только через Promise.reject(). – Mani 21 October 2016 в 03:24
  • 2
    @ceejayoz Проверьте Составление действий (последний раздел) в документах - vuex.vuejs.org/en/actions.html - действия являются асинхронными, и поэтому возвращение Promise - это хорошая идея, как указано в этих документах. Возможно, не в случае с $ http выше, но в некоторых других случаях нам может понадобиться знать, когда действие будет завершено. – Mani 21 October 2016 в 17:12
  • 3
    @ceejayoz правильно, что ваш магазин, безусловно, может быть использован для обеспечения обратной связи, когда действия завершены, а иногда это то, что вы должны делать. т. е. запускать действие и совершать мутации при завершении (передать или сбой). Vuex реагирует, поэтому состояния можно наблюдать очень легко. Однако идея Мани также действительна, поскольку она обеспечивает способность обеих цепочек Promises, которая позволяет намного более четкий рабочий процесс, а также совершать мутации до завершения. Поэтому по завершении обещания вы знаете, что состояние правильное, поскольку вы уже назвали синхронные мутации. – GuyC 25 October 2016 в 07:46
  • 4
    @ DanielPark Да, "это зависит & quot; по сценарию и индивидуальным предпочтениям разработчика. В моем случае я хотел избежать промежуточных значений, таких как {isLoading:true} в моем состоянии, и поэтому прибегал к обещаниям. Ваши предпочтения могут отличаться. В конце концов, наша цель состоит в том, чтобы написать беспорядочный и поддерживаемый код. Обещает ли эта цель или состояние vuex - остается отдельным разработчикам и командам. – Mani 31 October 2016 в 14:45
  • 5
    @ Мани хороший лорд, ты был прав, понял это, делая скрипку. Большое спасибо! – Amrit Kahlon 15 November 2017 в 22:21
4
ответ дан Anoop.P.A 30 October 2018 в 07:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: