Изменять состояние хранилища vuex с помощью действия в ответе axios - фиксация не работает - PullRequest
Новая
       9

Изменять состояние хранилища vuex с помощью действия в ответе axios - фиксация не работает

0 голосов
/ 30 мая 2018

Преамбула

Я полностью озадачен этим.Это первый вопрос, который я когда-либо задавал здесь, несмотря на то, что я читаю этот сайт более 7 лет.Ответ будет очевиден, в этом я уверен, но я его не вижу.

Проблема:

Я не могу написать в свой магазин vuex сАксиос ответ.Я прочитал и попробовал async / await, думал, что у меня есть приличное понимание обещаний и скопировал примеры слово в слово.Никаких кубиков.

Это мой мутатор, он работает, когда передается полезная нагрузка вне axios: 

mutations: {
    setDays (state, payload) {
        state.savedDays = payload
    }
}

Это действие, созданное в целях отладки, корректно обновляет магазин со словом «сыр»"и записывает ожидаемый объект ответа на консоль: 

getDays ({commit}) {
    axios.get('/days/')
    .then( (response) => {
        console.log(response.data)
    })
    commit('setDays', "cheese")
}

Это действие не обновляет хранилище, но все равно правильно регистрирует на консоли: 

getDays ({commit}) {
    return axios.get('/days/')
    .then( (response) => {
        // response object removed for debugging
        commit('setDays', "cheese")
        console.log(response.data)
    }
})

Я прочиталДокументы Vuex и многие другие решения здесь, перепробовали много вещей, включая следующее (не работает): 

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response)
})

Я не получаю сообщений об ошибках, использую chrome vue-devTools.Заранее спасибо.

Хорошо, я сделал это для дальнейшего тестирования, основываясь на комментариях ниже: 

async getDays ({commit}) {
    commit('setDays', "crackers")
    const response = await axios.get('/days/byType/30/1')
    console.log("Response:", response.data)
    commit('setDays', response.data)
    return response
}

Когда это действие отправлено, значение хранилища успешно изменено на "crackers ".

console.log успешно регистрирует объект ответа.

Второй коммит ничего не делает, даже если я пытаюсь зафиксировать строку, а не объект response.data.

1 Ответ

0 голосов
/ 30 мая 2018

Вы были близки с вашим третьим и четвертым примером кода.axios.get() возвращает обещание.поэтому вы должны либо использовать async await, либо .then.Чтобы ваш четвертый пример работал, все, что вам нужно сделать, это зафиксировать response.data

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response.data)
})

. Чтобы вернуть значение, используйте следующие строки 

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response.data)
    return response.data
})

FYIВы также можете использовать Разрушение объекта 

const { data } = await axios.get('/days/')
commit('setDays', data)
return data
...