1

我有一个分为 5 个组件的表单，用户可以通过步进器浏览它们（我的项目使用 vue-material）。我为此使用 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)
}

更多信息：当我填充不同的输入时，我看到存储已使用新值进行了更新，因此突变正在起作用。

4

2 回答 2

4

首先，Vuex 不在浏览器中存储数据——只是在内存中。这意味着您可以安装第三方插件，例如vuex 持久状态，或者将自己的方法写入存储set中get的项目，例如：

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

new Vuex({
   state: {
     yourProp: storage ?
        ? JSON.parse(storage.yourDataKey)
        : 'default-value'
   },
   actions: {...}
   mutations: {...}
})
于 2019-01-25T05:56:48.313 回答
0

我认为应该使用router-linkor $router.push()。

视图：

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：我会添加一个路由器推送

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

您的问题看起来像是 kristianmandrup 打开的问题：
菜单或带有路由器链接的选项卡！？

于 2018-06-11T10:22:01.057 回答