关于vuex传值出现的问题

Question

练习使用简单的vuex来传值store.js：const store = new Vuex.Store({  // 定义状态  state: {    headImg: ""  },  mutations:{    newImg(state,msg){      state.headImg=msg;    }  }})传值：this.$store.commit("newImg",val.HeadImgUrl);接收：<template>  <div>    <img :src="msg" alt="">  </div></template><script>  export default {    name: 'detail',    data () {      return {        msg: ''      }    },    created(){      this.msg=this.imgSrc;    },    computed: {      imgSrc () {        return this.$store.state.headImg; //vuex接受值      }    }</script>问题是在刷新的时候这个值就没了，怎么让它在刷新完页面后还存在这个值呢？（刚学vue没多久，还请指点）

Answer 1

store内的状态刷新后会重新初始化，可以通过本地存储解决

const store = new Vuex.Store({

  // 定义状态

  state: {

    headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""

  },

  mutations:{

    newImg(state,msg){

      sessionStorage.setItem('headImg', JSON.stringify(msg))

      state.headImg=msg;

    }

  }

})

Answer 2

this.$store.commit("newImg",val.HeadImgUrl);这个方法写到

created(){

  this.$store.commit("newImg",val.HeadImgUrl);

  this.msg=this.imgSrc;

},

Answer 3

本质上$store挂载在vue实例中的一个对象，当刷新页面后会重新生成vue实例,$store中的值也就不存在了。

Answer 4

把值在localhost里存一份，vuex中 state默认值是localstorage里的值就可以了