localStorage，store获取数据及数据重置

1. localStorage

数据存储

localStorage.user = JSON.stringify(user)
//运用localStorage存储数据
//因为locallocalStorage 是以键值对(Key-Value)的方式存储，
//所以必须将数据类型用JOSN转化，之后再存储到localStorage当中

在新组件里获取数据，并实现重置功能

methods:{
    getMessage(){
      this.user = JSON.parse(localStorage.user) 使用localStorage重置
      //同理，将值取出来需要JOSN从字符串转回user类型
    },
    resetForm(){
      this.getMessage()
    },
  },
  created() {
    this.getMessage()
  }

这种方法用起来比较简单，不需要另外写配置文件，再重新获取user时，又刚好会把之前的信息覆盖，不专门clear也影响不大；但是localStorage本意是用来存储信息，而此时用来传输数据有种奇怪的感觉（杀鸡用牛刀？），个人不是很推荐

2. store

首先，需要建立store文件，注册store

//store文件
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    user: {
      id: '',
      name: '',
      age: '',
      bir: ''
    },
  },
  mutations: {
    setUser(state, user){
      state.user = user
    }
  },
  getters: {
    getUser(state){
      return state.user
    }
  },
})

//在mian.js里注册store
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,
})

在组件里将数据存储到store

this.$store.commit('setUser',user)

具体功能实现与用localStorage类似，只需改变getMessage()方法即可

getMessage(){
      this.user = JSON.parse(JSON.stringify(this.$store.getters.getUser))
    }

需要注意的是，以下两种赋值方法

this.user = this.$store.getters.getUser

this.user = this.$store.state.user
都只能得到数据，而无法实现页面的重置功能，因为直接赋值对象，也会改变父对象的值（即store文件里的user属性也被改变），所以一个简单的解决方法便是套上两次JOSN，让store里的属性固定下来