vue.js - Как управлять состоянием vuex при смене маршрутов - PullRequest
Новая
       10

vue.js - Как управлять состоянием vuex при смене маршрутов

1 голос
/ 29 июня 2019

У меня есть такие маршруты:

  • /forum/abc/user/23/{posts, profile,...}
  • /forum/cde/user/28/{posts,profile,...}

В моем магазине Vuex я хочу иметь текущие объекты Forum и User, чтобы такие компоненты, как Profile.vue, могли получить к ним доступ. 

state: {
  forum: null,
  user: null,
}

Когда маршрутизатор вводит /forum/abc/user/23, forum и user должны быть загружены. Когда пользователь переходит на /forum/abc/user/23/posts, данные не нужно перезагружать, но когда пользователь переходит на /forum/def/user/28/posts, состояние необходимо обновить.

На данный момент я решил это с помощью вложенных маршрутов. У меня есть Forum.vue компонент и User.vue компонент, которые похожи и выглядят так:

Forum.vue: 

<template>
    <!-- "Key" to signal Vue to rerender the component on param change -->
    <router-view :key="this.$route.path"></router-view>
</template>    
<script>
  import store from "@/store/store.js";   
  export default {
    beforeRouteEnter(to, from, next) {
      store.dispatch("fetchForum");
    },
    beforeRouteUpdate(to, from, next) {
      store.dispatch("fetchForum");
    },  
  }
</script>

В моих маршрутах я вкладываю Forum и User, поэтому оба они всегда включены, но они ничего не отображают. Они несут ответственность только за изменение маршрута и запуск обновления магазина Vuex. 

export default {
    path: "/forum/:forum([a-z]+)/",
    components: {
        default: Forum,
        navigation: Navigation,
    },
    props: true,
    children: [
        {
            path: "",
            name: "ForumHome",
            component: ForumHome,
        },
        {
            path: "/user/:user([0-9]+)/",
            name: "User",
            component: User,
            props: true,
            children: [
              {
                path: "",
                name: "UserHome",
                component: UserHome
              }
            ]
        },
    ]
 }

Мне кажется странным определять компонент представления для прослушивания событий маршрутизатора для обновления состояния.

Это правильный способ решить эту проблему в Vuex / Vue / VueRouter? Или это должно как-то быть реализовано в магазине Vuex?

...