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;

    }

  }

})