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

Question

[Klaus Kater]

Здравствуйте. Пытаюсь сделать каркас приложения на 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 компонента, вызывает экшн хранилища, оно подтягивает данные и мутацией записывает. Компонент видит обновленные данные и показывает.
Но по факту вылезла сложность, при переходе по адресу - все срабатывает, а вот при прямом вводе адреса компонент ничего не показывает, хотя данные подгружаются. В чем может быть проблема?

Comments

[Evgeny Kulakov]

Не ясно где объявлена и как изменяется tasks в компоненте Tasks.

[Klaus Kater]

import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapState } = createNamespacedHelpers('Tasks')
import store from '../store/index'

export default {
  computed: { 
    ...mapState([
      'tasks'
    ]), .....

[Klaus Kater]

Вот в этом примере есть похожий момент
https://github.com/JFusco/vue-router-vuex-example
там для отображения/не отображения используется специальная переменная флаг, при начале загрузки устанавливаем флаг, после загрузки снимаем.

Answer 1

[Evgeny Kulakov]

Можно попробовать посмотреть два варианта:

1. нормально ли отрабатывает isFetching
2. возможно ломается реактивность при получении данных. Попробовать в мутации заменить на:

tasks: function (state, data) {
      let res = {}
      for(let item of data){
        res[item.pk] = item
      }
      state.tasks = res
    },