VueX - это мощное расширение Vue, которое помогает нам использовать возможности кеширования. А Axios - это класс-оболочка для метода выборки javascript, который в основном предпочитается разработчиками и предлагается Vue. Запросы POST в VueCLI принимают новую форму через Axios и могут замедлить процесс разработки.
Сохранение данных в VueX на каждом этапе процесса ввода данных и вызов API могут быть сложной задачей для новичков. Сохранение данных в VueX - это хорошая практика, поскольку ее можно использовать позже в любое время, пока пользователь не перезагрузит веб-сайт. Это чрезвычайно полезно для веб-приложений, созданных через Vue, поскольку почти вся навигация осуществляется через маршрутизатор, связывающий приложение.
Настройка store.js для Vue Management
Следующее добавляет хранилище 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 добавьте следующее к мутации, объявленной в третьем коде выше.
//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; border = $ {loginFormData._boundary} `
}
Вызов функции API в компоненте
Помните, что мы создали действия для вызова мутаций. Теперь мы вызываем эти действия через компоненты. Добавьте следующее в сегмент методов сценария командной строки
loginUser: function (email, password) {
this.$store.dispatch('loginUser')
.then((result) => {
//handle the returened data
})
},
Помните, что следующий метод вызывается так же, как мы вызывали, сохраняя данные в хранилище.
Он охватывает большинство проблем, возникающих с хранилищем vuex и запросами Axios Post.
Примечание.
Если в консоли появляется ошибка CORS, это означает, что браузеру не удается найти URL-адрес, поскольку веб-приложение находится в вашей локальной системе. Загрузите следующее расширение для Chrome:
и добавьте формат URL-адреса API, к которому будет осуществляться доступ, и включите его перед отправкой запроса.
