VueX е мощното разширение на Vue, което ни помага да използваме силата на кеширането. И Axios е клас обвивка за метод за извличане на javascript, най-вече предпочитан от разработчиците и предложен от Vue. POST заявките във VueCLI приемат нова форма чрез Axios и могат да доведат до забавяне на процеса на разработка.
Запазването на данните във VueX на всяка стъпка от процеса на въвеждане на данни и извикването на API може да бъде предизвикателна задача за начинаещи. Запазването на данните във VueX е добра практика, тъй като може да се използва по-късно по всяко време, докато потребителят не презареди уебсайта. Това е изключително полезно в уеб приложенията, направени чрез Vue, тъй като почти цялата навигация се извършва чрез рутера, който свързва приложението.
Настройване на store.js за управление на Vue
Следното добавя Vuex хранилището за класа. Уверете се, че първо импортирате същото.
export default new Vuex.Store({})
//adding data in store
state: {
userDetails: {
email: '',
password: '',
}
},
// this works similar to key value data storage but not limited to only text.
//mutations is the place where all API calls and data manipulation ins done
mutations: {
LOGIN_USER: (state) => {
}
},
//actions for a way to provide acces to mutations via Vue Components
actions: {
loginUser(context){
//commit message tells which mutation to execute
context.commit("LOGIN_USER")
}
},
//make sure all data in the store is sent via getters and not directly
getters: {
getUserDetails: state => {
return state.userDetails.email
}
}
След като добавим всички данни във Vuex.store, вече сме готови да ги препоръчаме в компонентите на VueCli и да направим API извиквания.
Запазване на данните чрез компоненти
В частта за скрипта на компонентите декларирайте променливите в частта data() и можете да ги актуализирате чрез v-модел, прикачен с входове. Запазването на данни се извършва чрез функции, декларирани в сегмента с методи. например:
methods: {
saveEmail: function (email) {
this.$store.state.userDetails.email = email
}
},
Следващият пример записва имейла в състоянието на магазина, което декларирахме в първата стъпка. Не забравяйте да извикате тази функция при всяко събитие, ако е необходимо. напр.
@click="saveEmail(e_mail)"
Следната функция се извиква при щракване върху елемента, най-вече бутон за изпращане. Тук предаденият параметър e_mail се декларира в сегмента с данни на компонента на скрипта.
Извършване на извикване на API с Axios
Това е трудната част поради допълнителните заглавки, които трябва да изпратим на извикването на API. В store.js добавете следното към мутация, декларирана в 3-тия код по-горе.
//declare the body form
let loginFormData = new FormData();
//add the parameters
loginFormData.set('email', state.userDetails.email);
loginFormData.set('password', state.userDetails.password);
const config = {
headers: {
'Content-Type': `multipart/form-data; boundary=${loginFormData._boundary}`
}
};//important step
Axios.post('url', loginFormData, config)
.then(data => {
console.log(data.data);
//handle the data
})
.catch(error => {
console.log(error.response)
})
Методът set може да бъде заменен с append за изпращане на всякакви файлове или изображения. Освен това някои потребители, ако имат проблем с set, могат да го заменят с .append със същата дефиниция на извикване на функция.
Заглавката на типа съдържание е важна стъпка за POST заявката. Въпреки че никъде не е изрично обяснено защо следното работи, но за API извиквания във VueCli не забравяйте да добавите следната заглавка и граница със същия синтаксис за действително изпращане на данните. В противен случай Axios може да изпрати празни данни на сървъра, връщайки грешки.
заглавки: {
‘Content-Type’: `multipart/form-data; boundary=${loginFormData._boundary}`
}
Извикване на API функцията в компонента
Не забравяйте, че създадохме действия за извикване на мутации. Сега извикваме тези действия чрез компонентите. Добавете следното в сегмента за методи на CLI скрипта
loginUser: function (email, password) {
this.$store.dispatch('loginUser')
.then((result) => {
//handle the returened data
})
},
Не забравяйте, че следният метод се извиква по същия начин, по който извикахме чрез запазване на данните в магазина.
Той обхваща повечето от проблемите, възникващи с vuex store и заявките на Axios Post.
Забележка:
Ако получавате CORS грешка в конзолата, това означава, че браузърът не може да достигне URL адреса, тъй като уеб приложението е на вашата локална система. Изтеглете следното разширение за Chrome:
и добавете формата на URL адреса на API за достъп и го включете, преди да изпратите заявката.
