vue 离开页面之前保存数据

这是一个常用的场景：用户在一个填写很多数据的表单页面，填写部分数据后，想返回到上一页做其它操作。

这时产生了一个离开页面保存数据的需求。

需要的知识点和步骤：

1. 监听离开页面的时机（建议用vue-router中的组件导航守卫：beforeRouteLeave）；
2. 存储（建议用：window.localStorage 或者 vuex）；
3. 下次进来之前读取缓存，如果有就赋值；

下面写下实现的教程：

一、监听离开页面的时机用：beforeRouteLeave，存储用localStorage

beforeRouteLeave 是一个vue-router中大家都容易忽略却非常有用的组件独享导航守卫，它可以监听该组件页面路由跳转的时机，我们就可以在这个时机做我们想做的事情，写的时候和methods同级。

具体代码实现：
项目中project.vue:

<template>
  <div>
    <div class="list" v-for="(item, index) in listData" :key="index">
        <input type="text" v-model="listData[index]">
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 用v-model 将数据与input表单双向绑定
      listData: ['', '']
    }
  },
  created () {
    // 如果有数据，赋值到页面上
    const data = localStorage.getItem('list')
    if (data) this.listData = JSON.parse(data)
  },
  beforeRouteLeave (to, from, next) {
    // 监听到页面离开时调用
    // to: 即将要进入的目标的路由对象
    // from: 当前导航正要离开的路由
    // next: 是一个function，一定要调用该方法，否则路由不会跳转。
    if (to.$route.name === 'homePage') {
      // 离开到'homePage'时才存储数据，这里可以弹框询问用户是否保存数据，更人性化
      localStorage.setItem('list', JSON.stringify(this.listData))
    }
    // 一定要调用next
    next()
  },
  methods: {

  }
}
</script>

二、监听离开页面的时机用：beforeRouteLeave，存储用vuex

记得要在store.js里面设置list的值
store.js

export default new Vuex.Store({
  state: {
    list: null
  },
  mutations: {
    setList (state, list) {
      state.list = list
    }
  },
  actions: {
  },
  modules: {
  }
})

项目中project.vue:

<template>
  <div>
    <div class="list" v-for="(item, index) in listData" :key="index">
        <input type="text" v-model="listData[index]">
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 用v-model 将数据与input表单双向绑定
      listData: ['', '']
    }
  },
  created () {
    // 如果有数据，赋值到页面上
    const data = this.$store.state.list
    if (data) this.listData = data
  },
  beforeRouteLeave (to, from, next) {
    // 监听到页面离开时调用
    // to: 即将要进入的目标的路由对象
    // from: 当前导航正要离开的路由
    // next: 是一个function，一定要调用该方法，否则路由不会跳转。
    if (to.$route.name === 'homePage') {
      // 离开到'homePage'时才存储数据，这里可以弹框询问用户是否保存数据，更人性化
      this.$sotre.commit('setList', this.listData)
    }
    // 一定要调用next
    next()
  },
  methods: {

  }
}
</script>