<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue + axios + vuex</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
</head>
<body>
<div id="app">
<h2>顾客管理</h2>
<!-- 表单 -->
<button @click="adduser">添加</button>
<form action="" v-show="visable" @submit.prevent="submitHandler">
姓名: <input type="text" v-model="form.realname">
手机: <input type="text" v-model="form.telephone">
<input type="submit" value="提交">
</form>
<!-- 表格 -->
<table >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="c in customers">
<td>{{c.id}}</td>
<td>{{c.realname}}</td>
<td>{{c.telephone}}</td>
<td>
<a href="" @click.prevent="deleteHandler1(c.id)">删除</a>
<a href="" @click.prevent="editHandler">修改</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
let store = new Vuex.Store({
state:{
visable:false,
customers:[]
},
getters:{
},
mutations:{
loadTubian(state,customers){
state.customers = customers
},
loadModel(state){
state.visable=true
},
loadModel2(state){
state.visable=false
}
},
actions:{
async loadDate(context){
let response = await axios.get("")
console.log(response)
context.commit("loadTubian",response.data)
},
async deleteHandler({dispatch},aaa){
let response = await axios.get(""+aaa)
dispatch("loadDate")
return response
},
async saveOrUpdateCustomer({dispatch,commit},customer){
console.log($.param(customer))
let response = await axios({
url:""+$.param(customer),
method:"post",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
});
commit("loadModel2");
dispatch("loadDate");
return response;
}
}
})
new Vue({
el:"#app",
store,
computed: {
...Vuex.mapState(["visable","customers"])
},
data:{
form:{}
},
created() {
this.loadDate()
},
methods: {
...Vuex.mapActions(["loadDate","deleteHandler","saveOrUpdateCustomer"]),
...Vuex.mapMutations(["loadModel","loadModel2"]),
submitHandler(){
// console.log(this.form)
this.saveOrUpdateCustomer(this.form)
.then((response)=>{
alert(response.message)
})
},
adduser(){
this.form={}
this.loadModel()
},
deleteHandler1(id){
let promise = this.deleteHandler(id)
promise.then((response)=>{
alert(response.message)
})
},
editHandler(){
this.loadModel()
}
},
})
</script>
</body>
</html>两个问题:
1.为什么在loadDate的异步请求中，console.log(response)发现，返回的结果并没有封装到data中？
2.在saveOrUpdateCustomer的异步请求中，为什么将$.param(customer)写到data中，会导致数据无法传输，而将$.param(customer)拼接到url后面就可以?
