kurojneko
@kurojneko

Как в компоненте обработать прямой переход по адресу?

Здравствуйте. Пытаюсь сделать каркас приложения на vue. Возник такой вопрос.
есть роут - список задач
{
    path: '',
    name: 'tasks',
    component: Tasks
  }

Сам компонент Tasks

<template>
  <div>
    <ul v-if="!tasks.isFetching">
      <li v-for="task of tasks" > {{ task.name }}</li>
    </ul>
  </div>
</template>
<script>
import store from '../store/index'

export default {
  beforeRouteEnter (to, from, next) {
    store.dispatch('Tasks')
        .then(() => {
          next()
        })
  }
}
</script>


И хранилище
export default {
  namespaced: true,
  state: {
    tasks: {}
  },
  mutations: { // Изменения Стора
    tasks: function (state, data) {
      for(let item of data){
        state.tasks[item.pk] = item
      }
    },
  },
  actions: {
    tasks: (context, filter) => {
      axios.get('/tasks/').then((response) => {
        context.commit('tasks', response.data)
      })
    },
  }
}

По плану, попадаем на наш список, срабатывает beforeRouteEnter компонента, вызывает экшн хранилища, оно подтягивает данные и мутацией записывает. Компонент видит обновленные данные и показывает.
Но по факту вылезла сложность, при переходе по адресу - все срабатывает, а вот при прямом вводе адреса компонент ничего не показывает, хотя данные подгружаются. В чем может быть проблема?
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Можно попробовать посмотреть два варианта:

1. нормально ли отрабатывает isFetching
2. возможно ломается реактивность при получении данных. Попробовать в мутации заменить на:
tasks: function (state, data) {
      let res = {}
      for(let item of data){
        res[item.pk] = item
      }
      state.tasks = res
    },
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы