Ответ 1
Vuex управляет всеми данными в вашем приложении. Это "единственный источник истины" для данных на вашем интерфейсе. Поэтому все, что изменяет состояние вашего приложения, например, добавление друга или отказ от друга, должно проходить через Vuex. Это происходит с помощью трех основных типов функций, геттеров, действий и мутаций.
Отъезд: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex
Getters используются для извлечения данных из хранилища в Vuex. Они реагируют на изменения, то есть при изменении данных Vuex информация в вашем компоненте также обновляется. Вы можете поместить их в нечто вроде getters.js
, чтобы вы могли импортировать их в любой модуль, в котором они вам нужны.
Действия - это функции, которые вы вызываете напрямую, т.е. acceptFriendRequest
, когда пользователь нажимает кнопку. Они взаимодействуют с вашей базой данных, а затем отправляют мутации. В этом приложении все действия находятся в actions.js
.
Таким образом, вы вызываете this.acceptFriendRequest(recipient)
в свой компонент. Это сообщит вашей базе данных о обновлении статуса друга, после чего вы получите подтверждение, что это произошло. Это когда вы отправляете мутацию, которая обновляет список друзей текущих пользователей в Vuex.
Мутация обновляет данные в Vuex, чтобы отразить новое состояние. Когда это происходит, все данные, которые вы получаете в геттере, также обновляются. Вот пример всего потока:
import {addFriend} from './actions.js';
import {friends} from './getters.js';
new Vue({
vuex:{
getters:{
friends
}
},
methods:{
addFriend
}
}
store.js:
export default {
state:{
friends: []
},
mutations:{
ADD_FRIEND(state, friend) {
state.friends.push(friend);
}
}
}
actions.js:
export default {
addFriend(friend){
Vue.http.post('/users/1/friends',friend)
.then((response)=>{
dispatch("ADD_FRIEND", response) //response is the new friend
})
}
}
getters.js
export default {
friends(state) {
return state.friends;
}
}
Итак, все они организованы в свои собственные файлы, и вы можете импортировать их в любой компонент, который вам нужен. Вы можете вызвать this.addFriend(friend)
из любого компонента, а затем ваш получатель, доступ к которому из this.friends
будет автоматически обновляться новым другом, когда произойдет мутация. Вы всегда можете использовать одни и те же данные в любом представлении в своем приложении и знать, что он работает с вашей базой данных.
Некоторые вещи:
- getters автоматически получает
state
как переменную, поэтому вы всегда можете ссылаться на состояние своего магазина Vuex. Мутации - никогда не должны быть асинхронными. Делать выборку/обновление в действиях, а затем отправлять мутации только для обновления ваших данных.
- Создание сервисов (или ресурсов) с помощью
Vue Resource
сделает выборку/обновление/удаление ресурсов еще проще. вы можете поместить их в отдельные файлы и импортировать их в свойactions.js
, чтобы разделить логику поиска базы данных. Тогда вы должны написать что-то вродеFriendService.get({id: 1})
вместоVue.http.get('/users/1')
. см. https://github.com/vuejs/vue-resource/blob/master/docs/resource.md - Vuex работает с vue devtools для "путешествия во времени". Вы можете увидеть список всех мутаций, которые произошли и перемотать их/переделать. Это отлично подходит для отладки и просмотра, где данные изменяются.