Vue Watch не запускаются на странице Обновить / Перезагрузить - PullRequest
Новая
       35

Vue Watch не запускаются на странице Обновить / Перезагрузить

0 голосов
/ 07 марта 2019

У меня есть компонент, который спрятан на основе активного маршрута, он запускает функцию, которая хранится в хранилище vuex.

Работает как задумано, sidenav скрыт при входе, выходе и регистрации.

Однако я заметил, что когда я нахожусь на аутентифицированной странице, такой как панель администратора, панель инструментов и т. Д., Компонент отображается правильно, но когда / если кто-то перезагружает веб-страницу, компонент исчезает, и отображается только при нажатии на ссылку. на другую страницу.

App.Vue 

<template>
    <div id="app">
        <navbar />
        <sidenav v-show="sidenav_toggle" />
        <div class="row router-container">
            <div class="col router-row">

                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'

import axios from 'axios'
import AxiosStorage from 'axios-storage'

let sessionCache = AxiosStorage.getCache('localStorage');



import materializecss from '../static/css/main.css'
import materializejs from '../static/materialize-css/dist/js/materialize.js' 

import navbar from '@/components/navbar'
import sidenav from '@/components/sidenav'

Vue.use(Vuex)

const state = {
    sidenav:{
        show: false
    }
}

const mutations = {
    show_sidenav(state){
        state.sidenav.show = true
    },
    hide_sidenav(state){
        state.sidenav.show = false
    }
}

const store = new Vuex.Store({
    state,
    mutations
})



export default {
    router,
    name: 'App',
    watch:{
        $route: function(){
            if(this.$route.path === '/login' || this.$route.path === '/logout' || this.$route.path === '/register'){
        store.commit('hide_sidenav')
        console.log('not authd')
            }else{
        store.commit('show_sidenav')
        console.log('authd')
            }
        },
        deep: true,
        immediate: true
    },
    computed: {
        sidenav_toggle(){
            return store.state.sidenav.show
        }
    },

    data: function(){
        return{
        }
    },
    components: {
        navbar,
        sidenav
    },
    methods: {


    },
    created: function(){

    }
}
</script>

1 Ответ

0 голосов
/ 10 марта 2019

Ваш наблюдатель не вызывается, если вы попадаете прямо на страницу администратора, потому что свойство $route никогда не изменяется (а наблюдатели только следят за изменениями).

Что вы можете сделать, это переместить функцию наблюдателя ви вызовите этот метод в хуке created и в вашем наблюдателе.

Еще лучший способ сделать это - использовать vue-router navigation-guards

Пример: 

export default {
  // ...
  methods: {
    adaptSidebar(path) {
      if (['/login', '/logout', '/register'].includes(path)) {
        store.commit('hide_sidenav')
      } else {
        store.commit('show_sidenav')
      }
    },
  },
  beforeRouterEnter(from, to, next) {
    // As stated in the doc, we do not have access to this from here
    next(vm => {
      vm.adaptSidebar(to.path)
    })
  },
  beforeRouteChange(from, to, next) {
    this.adaptSidebar(to.path)
  },
}
...