У меня проблема с начальным состоянием данных в моем приложении. Я использую vuex и vue-router, и я думаю, что асинхронная работа сбивает меня с толку, но я не уверен, как это исправить.
На мой взгляд, компонент view.vue:
beforeRouteEnter(to, from, next) {
store.dispatch('assignments/getAssignment', {
id: to.params.id
}).then(res => next());
},
В моем модуле:
getAssignment({commit, state}, {id}) {
return axios.get('/assignments/' + id)
.then(response => {
if(response.data.data.type == 'goal_plan') {
const normalizedEntity = normalize(response.data.data, assignment_schema);
commit('goals/setGoals', {goals: normalizedEntity.entities.goals}, {root: true});
commit('goals/setGoalStrategicPriorities', {goal_priorities: normalizedEntity.entities.strategicPriorities}, {root: true});
commit('goals/setObjectives', {objectives: normalizedEntity.entities.objectives}, {root: true});
commit('goals/setStrategies', {strategies: normalizedEntity.entities.strategies}, {root: true});
}
commit('setAssignment', {assignment: response.data.data});
}).catch(error => {
console.log(error);
EventBus.$emit('error-thrown', error);
});
},
Несколько подкомпонентов отключены, я хочу получить доступ к state.goals.goals, но изначально он не определен. Я могу справиться с некоторыми проблемами из этого, но не со всеми.
Например, у меня есть дочерний компонент view.vue, который включает
computed: {
originalGoal() {
return this.$store.getters['goals/goalById'](this.goalId);
},
},
data() {
return {
form: {
id: this.originalGoal.id,
description: this.originalGoal.description,
progress_type: this.originalGoal.progress_type,
progress_values: {
to_reach: this.originalGoal.progress_values.to_reach,
achieved: this.originalGoal.progress_values.achieved,
},
due_at: moment(this.originalGoal.due_at).toDate(),
status: this.originalGoal.status,
},
В первые дни перед тем, как я начал использовать vuex, я передавал первоначальную цель как опору, так что это не было проблемой. Так как он теперь извлекается из состояния, я получаю кучу ошибок, что он не может найти различные свойства undefined. В конечном счете originalGoal разрешается на дисплее, но никогда не будет отображаться в форме таким образом.
Я пытался "посмотреть" на вычисленную опору, но я никогда не видел, когда она изменилась, и я почти уверен, что это неправильный способ сделать это в любом случае.
Итак, есть ли способ получить набор данных изначально? Если нет, то как мне установить значения формы после того, как данные установлены? (Любые другие предложения приветствуются, так как я довольно новичок в vuex и vue-router.)