用混入的方法引入vuex，并且解决vuex刷新页面值丢失的问题

前段时间，做了个官网项目，客户要求将首页的域名后面的参数去除干净，然后就把#去掉了，一转脸，客户让去掉子页面地址栏上的参数，这很棘手，因为子页面的内容是根据子页面地址栏上的参数而定的，如果要去掉这些参数，怎么在跳转页面时也可以拿到上一个页面所存的变量呢？于是，想起了vuex，但是vuex有一个问题是，一旦刷新页面，vuex中的值会丢失，那怎么解决呢？就是在存变量值的同时在session中也存一份数据，在取变量值时，如果刷新了页面，变量值肯定就不存在了，这时我么你可以判断vuex中的变量是否有值，若果有值就直接取，如果没值，就从sessionStorage中拿，（需要注意的时，在最初，一定是存值在先，取值在后，否者，还没存，先取了，肯定取到个null值）。解决了vuex值刷新页面丢失问题后，又想，每次引入vuex，设置什么computed，methods什么的，很麻烦，如果是很多页面都会用到vuex中的某几个变量，在每个页面都引入vuex，再设置computed，methods等，显得很繁琐，于是想起了mixins，vue中的一种混入机制。下面来看看具体的代码：

store.js

黄色背景的代码解决了vuex刷新页面值丢失的问题

 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {//声明变量
    val:"",//变量
  },
  getters:{//获取值
    getVal(state){
      if(state.val){
        return state.val;
      }else{
        return sessionStorage.getItem("val")
      }
    }
  },
  mutations: {//值如何变化
    setVal(state,value){
      state.val=value;
      sessionStorage.setItem("val",value);//在session中存一下
    }
  },
  actions: {//异步执行   可以按顺序调用多个mutations的方法
    asyncSetVal({commit,state},value){
      commit("setVal",value);
    }
  }
});

 

下面，看看如何使用混入（在src目录下建立mixins/mixinVuex.js）

 

 

 mixinVuex.js（混入的代码会比父页面先执行）

import {mapGetters,mapActions} from "vuex"



export default {
    computed:{
        ...mapGetters([
            'getVal'//获取到state.val数据。
        ])
    },
    watch:{

    },
    data() {
        return {
            mixinName: 'mixin'
        }
    },
    created() {
        
    },
    mounted() {

    },
    methods: {
        ...mapActions([
            "asyncSetVal"
        ]),
    }
}

接下来看看如何把mixinVuex.js混入到某个页面

<template>
    <div class="homeBox">
        //...
        
    </div>
</template>

<script>
import mixinVuex from '@/mixins/mixinVuex.js'; // 引入mixin文件
export default {
    name: "home",
    mixins:[mixinVuex],
    data(){
        return{}
    },
    methods: {
        homeInit(lang){//初始化
            var self=this;
        },
        toChildPage(){
            this.asyncSetVal("变量");
            this.$router.push({name:"childPage"});
        },
        toChildPage2(){
            this.asyncSetVal("变量2");
            this.$router.push({name:"childPage"});
        }
    }
};
</script>

<style scoped>
    .homeBox{

    }
</style>

ok  结束

 另一种解决 vuex刷新后store中值丢失问题：

另一种方法：

vue store的值刷新就被覆盖解决方案

 

《转》最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

1. 产生原因
2. 解决思路
3. 解决过程
1. 产生原因
其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2. 解决思路
一种是state里的数据全部是通过请求来触发action或mutation来改变

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

3. 解决过程
首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

然后是怎么用sessionStorage来保存state里的数据。

第一种方案

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。又由于vuex规定所有state里数据必须通过mutation方法来修改，所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，都这样了，那不如直接用sessionStorage来做状态管理。

那怎么才能不用每次修改state时同时也要修改sessionStorage呢？这时我们可以换一个思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面?

当然有，beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢？我们总不能每个页面都监听这个事件，所以我选择放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

具体的代码如下：

 1 export default {
 2 name: 'App',
 3 created () {
 4 //在页面加载时读取sessionStorage里的状态信息
 5 if (sessionStorage.getItem("store") ) {
 6 this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
 7 }
 8 
 9 //在页面刷新时将vuex里的信息保存到sessionStorage里
10 window.addEventListener("beforeunload",()=>{
11 sessionStorage.setItem("store",JSON.stringify(this.$store.state))
12 })
13 }
14 }

自己项目中用到的，亲测可用：

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    if (localStorage.getItem("meetingManagerStore") ) {
      console.log("页面加载时，将本地存储中的值存到stroe中")
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("meetingManagerStore"))))
    };
    window.addEventListener("beforeunload",()=>{
      console.log("页面刷新前，将vuex中的所有值存到localStorage中")
      localStorage.setItem("meetingManagerStore",JSON.stringify(this.$store.state))
    })
  },
}).$mount("#app");

 

这样做过后，就相当于vuex的值刷新页面时就永远不会丢失了，灰常好用

。