Как сохранить некоторое состояние между маршрутами с помощью vue & vue-router - PullRequest
Новая
       21

Как сохранить некоторое состояние между маршрутами с помощью vue & vue-router

0 голосов
/ 25 сентября 2018

У меня есть навигационный поток, состоящий из 

SearchPage -> ...Others or SearchPage -> ...Others or SearchPage ->

, и я хочу сохранить то, что было строкой поиска при переходе назад. 

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <toolbar :title="title" :action="doCreate" label="New"></toolbar>
    <q-search inverted placeholder="Type Name, Code, Nit, Phone Number or Email" float-label="Search" v-model="search" />
    <q-btn icon="search" color="secondary" @click="doSearch" />
  </q-layout-header>
</q-layout>
</template>

Теперь проблема заключается в том, как соотнести стекзапросы и один из маршрутизаторов, когда тот факт, что пользователь может перемещаться в другом месте.

PD Все на одной странице.Если это возможно, лучше сохранить экран без обновления (но только для страниц поиска, пока они не вернутся назад).

1 Ответ

0 голосов
/ 25 сентября 2018

Вариант 1: Навигационная защита

Вы можете использовать так называемую Навигационная защита , которая позволяет добавлять глобальные действия до, после и при обновлении маршрута.Вы также можете добавить его непосредственно в свой компонент с помощью In-component Guards , который позволит вам сохранить содержимое данных search.

const VueFoo = {
   // I guess your search attribute is in your data
    data() {
      return {
        search: ''
      }
  },
  mounted() {
      // retrieve your information from your persistance layer
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.

     // persist this.search in localstorage or wherever you like it to be stored
  }
}

Вариант 2. Использование магазина (Vuex)

Если вы можете добавить Vuex Store или любой другой магазин, я настоятельно рекомендую это сделать.Поскольку вы пометили квазар, я хочу сослаться на документацию Vuex Store , предоставленную там.По сути, вы можете передать свойство search на аутсорсинг и позволить ему сохранить его в вашем приложении. 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    search_term: ''
  },
  mutations: {
    SET_SEARCH_TERM (state, payload) {
      state.search_term = payload.search_term
    }
  },
  actions: {
    SEARCH ({ commit, state }, payload) {
      commit('SET_SEARCH_TERM', payload.search_term)

      // your api call to search which can also be stored in the state
    }
  }
})
export default store

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

store.commit('SET_SEARCH_TERM', {
  search_term: this.search // your local search query
})

В вашем коде, где вы запускаете действие ACTION для поиска, если хотите сохранять его при каждом поиске 

store.dispatch('SEARCH', {
  search_term: this.search
})

Получаете доступ к свойству search_term или как хотите его вызыватьможет быть сделано с использованием вычисляемого свойства.Вы также можете напрямую связать состояние и мутации без необходимости использовать навигационную охрану: 

// your Vue component
computed: {
  search: {
    get () {
      return this.$store.state.search_term
    },
    set (val) {
      this.$store.commit('SET_SEARCH_TERM', { search_term: val })
    }
  }
}

Обязательно изучите основную концепцию перед использованием: https://vuex.vuejs.org/

...