怎樣使用localStorage保存頁面中Vue渲染的列表，頁面刷新后還原為之前的頁面

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Title</title>
<script src="dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script src="dist/vuex.min.js"></script>
<style>
    .mseeage{
        width: 800px;
        height: 60px;
        float: right;
    }
    .answer{
        width: 800px;
        height: 60px;
        float: left;
    }
</style>

</head>
<body>
<div id="box">

 <div v-for="item in $store.state.cartList"  >
      <p class="mseeage">{{ item.message }}<img src="images/tx1.jpg"></p>
      <p class="answer"><img src="images/tx2.jpg">{{ item.answer}}</p>
  </div>
 <div><input  v-model="message"><button id="save" @click="info()">發(fā)送</button></div>

</div>
<script>

const store =    new Vuex.Store({
    state:{
        cartList:[]//是記錄用戶列表狀態(tài)
    },
    mutations:{
        setTalk(state,info){
            state.cartList.push(info)
        }
    }
})
var example1 = new Vue({
    el: '#box',
    data(){
        return{
            message:[],
            answer:[]
        }
    },
    methods:{
      info(){
          this.$http.get('http://www.tuling123.com/openapi/api?key=72d6117e0eef403c95c9aebe73a07e6a' + '&info=' + this.message)
              .then(function (response) {
                  console.log(response.body.text);
                  this.answer = response.body.text;
                  store.commit('setTalk',{
                      message:this.message,
                      answer:this.answer,
                  });
              });
        }
    },
    store
})

</script>
</body>
</html>

回答

編輯回答

心夠野

有意思的問題～
剛想了一下，應用場景應該是要保留用戶的操作，刷新頁面后還原現(xiàn)場。如果能把要還原的組件內(nèi)部所有狀態(tài)保留到localStorage，應該就可以還原。
最傻的辦法需要在每個組件內(nèi)部單獨維護自己的變量和localStorage里的對應關系，這樣肯定可行但不靈活。
要通用的話，需要清楚vue是怎么獲取組件實例對象，以及對象內(nèi)部變量的存放路徑。這不會是個簡單的活，需要做很多抽象。
但兩種方法的思路都是一樣的:組件初始化時根據(jù)localStorage對組件變量賦值，監(jiān)聽變量變化并同步localStorage。
后來想到如果用vuex去管理這些需要還原的狀態(tài)，實現(xiàn)起來會容易很多，但感覺如果不好好整理，會把vuex搞得很亂。。。
你要能完整的搞一套方案出來并落地的話一定會很出彩～

2017年3月15日 04:16

編輯回答

空痕

看到你的數(shù)據(jù)是通過接口請求的, 那么就不用存本地了吧, 你在 created 函數(shù)內(nèi) 調(diào)用一下 this.info() 方法, 這樣每次刷新頁面都會執(zhí)行 created, 然后去調(diào)用 this.info, 在通過 commit 將數(shù)據(jù)存到 state 內(nèi), 再然后就渲染出來了

2017年6月29日 04:07