<!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>