Vue：页面传值（vue-router）与状态提升（Vuex)

目标：实现A页面与B页面之间的传值，并且将该值保存在B页面（即：从别的页面过来，或者刷新浏览器，B页面仍能显示该值）。

方式一：vue-router传值

说到页面传值，马上想到的就是通过router在页面跳转的时候，将值带过去。

将A页面中的title字段，在页面跳转后传递给B页面，在A页面中加入如下代码：（需在router中配置B页面）

this.$router.push({
  name: 'B',
  params: {
    title: title
  }
})

B页面接收

 data() {
    return {
        title: this.$route.params.title,
    }
 },

实现效果：从A页面跳转到B页面，title值传递成功。

发现问题：该方式只限A、B页面之间的传值，当从C页面跳转到B后，或者页面刷新，title值恢复初始化的空值，没有实现目标。

方式二：vuex状态提升

既然页面传值不能解决问题，那么用vuex将title提升为全局变量总可以了吧。

安装（切换到项目根目录）

npm install vuex --save-dev

新建文件夹 store，在该文件夹下新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    title:''
  },
  mutations:{
    tranTitle(state,title){
      state.title = title;
    }
  },
  actions:{
    tranTitleFun(context,title){
      context.commit("tranTitle",title);
    }
  }

});

export default store;

在从A页面跳转到B页面的函数中加入：

this.$store.dispatch("tranTitleFun",title);
this.$router.push('/B');

实现效果：title已被提升为全局变量，从A页面跳转到B，title值顺利传递，无论从任何一个页面跳转到B，title值均可正常显示。

发现问题：B页面刷新，title值恢复初始化。

原因：vuex对数据的缓存走的是浏览器的存储，当浏览器刷新时，数据恢复初始化。

方式三：vuex+sessionStotage

vuex和本地存储相结合，在页面刷新时将vuex里的信息保存到sessionStotage里，在页面加载时读出sessionStorage里的信息。

在B页面中加入：

created () {
  //在页面加载时读取sessionStorage里的状态信息
  if (sessionStorage.getItem("store") ) {
    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
  }

  //在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload",()=>{
    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
  })
},

实现效果：title提升为了全局变量，刷新浏览器仍可正常显示在B页面。

至此，目标完成。

可以看到vue-router，vuex各有其优缺点，可根据具体需要灵活使用。欢迎交流指正。