极客观点
项目管理
HarmonyOS
<!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()">发送</button></div></div>
<script>
const store = new Vuex.Store({
state:{
cartList:[]//是记录用户列表状态
},
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>
看到你的数据是通过接口请求的, 那么就不用存本地了吧, 你在
created函数内 调用一下this.info()方法, 这样每次刷新页面都会执行created, 然后 去调用this.info, 在通过commit将数据存到state内, 再然后就渲染出来了