鍍金池/ 問答/HTML/ vuex傳值問題

vuex傳值問題

練習(xí)使用簡單的vuex來傳值
store.js：

const store = new Vuex.Store({
  // 定義狀態(tài)
  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>

問題是在刷新的時(shí)候這個(gè)值就沒了，怎么讓它在刷新完頁面后還存在這個(gè)值呢？（剛學(xué)vue沒多久，還請(qǐng)指點(diǎn)）

回答
編輯回答
兔寶寶

store內(nèi)的狀態(tài)刷新后會(huì)重新初始化，可以通過本地存儲(chǔ)解決

const store = new Vuex.Store({
  // 定義狀態(tài)
  state: {
    headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
  },
  mutations:{
    newImg(state,msg){
      sessionStorage.setItem('headImg', JSON.stringify(msg))
      state.headImg=msg;
    }
  }
})
2018年6月23日 13:41
編輯回答
清夢(mèng)

this.$store.commit("newImg",val.HeadImgUrl);這個(gè)方法寫到

created(){
  this.$store.commit("newImg",val.HeadImgUrl);
  this.msg=this.imgSrc;
},
2017年5月4日 08:40
編輯回答
帥到炸

把值在localhost里存一份，vuex中 state默認(rèn)值是localstorage里的值就可以了

2018年7月4日 16:46
編輯回答
傲寒

本質(zhì)上$store掛載在vue實(shí)例中的一個(gè)對(duì)象，當(dāng)刷新頁面后會(huì)重新生成vue實(shí)例,$store中的值也就不存在了。

2018年7月17日 13:55