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里的值就可以了