Vue-router перезагружает страницу, и я теряю свое состояние, как мне избежать этого? - PullRequest
Новая
       44

Vue-router перезагружает страницу, и я теряю свое состояние, как мне избежать этого?

0 голосов
/ 10 июня 2018

У меня есть форма, разделенная на 5 компонентов, и пользователь может перемещаться по ним с помощью степперов (я использую vue-материал для своего проекта).Для этого я использую vue-router.Однако у меня возникла серьезная проблема: компоненты теряют всю информацию в магазине (я использую vuex), когда они возвращаются к маршруту, который они уже пролили.Итак, чтобы было понятно: если пользователь заполняет первый шаг формы и затем переходит ко второму шагу, когда он хочет вернуться к первому шагу, данные больше не доступны, а форма полностью пуста (а состояние в vuex равнотоже сбросить).Что я делаю не так? 

import Vue from 'vue'
import Router from 'vue-router'
import Projet from '@/components/Fiches/Projet/Projet'


Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',
  name: 'Home',
  component: Projet
},
//other routes here
]
})

И это HTML-код 

<template>
 <div class="project-steppers">
   <md-steppers md-dynamic-height md-alternative>
      <md-step id="first" to="/Projet" md-label="Projet" />
       // other steps here
    </md-steppers>
  </div>
</template>

И пример одного из входов, которые я использую: 

      <md-field>
        <label for="project-name">Nom du projet</label>
        <md-input id="project-name"
                  v-model="project.projectName"
                  name="project-name"
                  @change="updateProjectName"/>
      </md-field>

[...]
  methods: {
updateProjectName () {
  this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
}

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

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Прежде всего, Vuex не сохраняет данные в браузере - только в памяти.Это означает, что вам нужно использовать плагин, такой как vuex persisted state или написать свои собственные методы для установки и получения элементов из вашего хранилища.Позже вы можете прочитать данные следующим образом: 

const storage = localStorage.getItem('key');

new Vuex({
   state: {
     yourProp: storage ?
        ? JSON.parse(storage.yourDataKey)
        : 'default-value'
   },
   actions: {...}
   mutations: {...}
})
0 голосов
/ 11 июня 2018

Я думаю, что следует использовать router-link или $router.push().

Vue: 

import Vue from 'vue'
import Router from 'vue-router'
import Projet1 from '@/components/Fiches/Projet/Projet1'
import Projet2 from '@/components/Fiches/Projet/Projet2'
import Projets from '@/components/Fiches/Projet/Projet' //with props

Vue.use(Router)     

export default new Router({
routes: [
{
  path: '/',
  name: 'Home',
  component: Projet1 // default project
},
    {
  path: '/Projet1',  // url for the same component
  name: 'Projet1',
  component: Projet1
},
{
  path: '/Project2',
  name: 'Projet2', // url for the another component
  component: Projet2
},
{
  path: '/Project/:id',
  name: 'Projets', // url for a component with props 
  component: Projet,
  props: true
}
]
})

HTML: способ вызова Projet без перезагрузки с помощью router-link

<template>
<router-link to="/Home"></router>
<router-link to="/Projet1"></router>
<router-link to="/Projet2"></router>
</template>

js: я бы добавил push-уведомление маршрутизатора 

updateProjectName () {
  this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
  this.$router.push('/' + this.project.projectName)
}

Ваш вопрос похож на проблему, открытую kristianmandrup:
меню или вкладки со ссылками на роутер!?

...