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

this.$store.commit("newImg",val.HeadImgUrl);这个方法写到created(){   this.$store.commit("newImg",val.HeadImgUrl);     this.msg=this.imgSrc; },

Answer 2

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;    }  }})