Неопределенные данные при использовании vuex и vue-router - PullRequest
Новая
       33

Неопределенные данные при использовании vuex и vue-router

0 голосов
/ 29 августа 2018

У меня проблема с начальным состоянием данных в моем приложении. Я использую 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.)

1 Ответ

0 голосов
/ 29 августа 2018

Так что, если я установлю значения формы в «смонтированном», я смогу заставить это работать. Я все еще изучаю жизненный цикл Vue. :)

...