Skip to content

Commit 333aaab

Browse files
author
v-anzha
committed
vuex use
2 parents c9c5421 + d179ac6 commit 333aaab

File tree

10 files changed

+273
-48
lines changed

10 files changed

+273
-48
lines changed

‎package-lock.json

Lines changed: 49 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"dependencies": {
1111
"axios": "^0.18.0",
12+
"element-ui": "^2.4.6",
1213
"vue": "^2.5.17",
1314
"vue-router": "^3.0.1",
1415
"vuex": "^3.0.1"

‎src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<div id="app">
33
<div id="nav">
44
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
5+
<router-link to="/about">Form</router-link> |
6+
<router-link to="/Vuex">Vuex</router-link>
67
</div>
78
<router-view/>
89
</div>

‎src/api/http.js

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
// 配置API接口地址
2-
var root = 'http://123.206.33.109:8012/api'
2+
var root1 = "https://localhost:44352/api";
3+
var root = "http://123.206.33.109:8012/api";
34
// 引用axios
4-
var axios = require('axios')
5+
var axios = require("axios");
56
// 自定义判断元素类型JS
6-
function toType (obj) {
7-
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
7+
function toType(obj) {
8+
return {}.toString
9+
.call(obj)
10+
.match(/\s([a-zA-Z]+)/)[1]
11+
.toLowerCase();
812
}
913
// 参数过滤函数
10-
function filterNull (o) {
14+
function filterNull(o) {
1115
for (var key in o) {
1216
if (o[key] === null) {
13-
delete o[key]
17+
delete o[key];
1418
}
15-
if (toType(o[key]) === 'string') {
16-
o[key] = o[key].trim()
17-
} else if (toType(o[key]) === 'object') {
18-
o[key] = filterNull(o[key])
19-
} else if (toType(o[key]) === 'array') {
20-
o[key] = filterNull(o[key])
19+
if (toType(o[key]) === "string") {
20+
o[key] = o[key].trim();
21+
} else if (toType(o[key]) === "object") {
22+
o[key] = filterNull(o[key]);
23+
} else if (toType(o[key]) === "array") {
24+
o[key] = filterNull(o[key]);
2125
}
2226
}
23-
return o
27+
return o;
2428
}
2529
/*
2630
接口处理函数
@@ -32,51 +36,52 @@ function filterNull (o) {
3236
另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
3337
*/
3438

35-
function apiAxios (method, url, params, success, failure) {
39+
function apiAxios(method, url, params, success, failure) {
3640
if (params) {
37-
params = filterNull(params)
41+
params = filterNull(params);
3842
}
3943
axios({
4044
method: method,
4145
url: url,
42-
data: method === 'POST' || method === 'PUT' ? params : null,
43-
params: method === 'GET' || method === 'DELETE' ? params : null,
46+
data: method === "POST" || method === "PUT" ? params : null,
47+
params: method === "GET" || method === "DELETE" ? params : null,
4448
baseURL: root,
49+
// `headers` 是即将被发送的自定义请求头
4550
withCredentials: false
4651
})
47-
.then(function (res) {
52+
.then(function(res) {
4853
if (res.data.success === true) {
4954
if (success) {
50-
success(res.data)
55+
success(res.data);
5156
}
5257
} else {
5358
if (failure) {
54-
failure(res.data)
59+
failure(res.data);
5560
} else {
56-
window.alert('error: ' + JSON.stringify(res.data))
61+
window.alert("error: " + JSON.stringify(res.data));
5762
}
5863
}
5964
})
60-
.catch(function (err) {
61-
let res = err.response
65+
.catch(function(err) {
66+
let res = err.response;
6267
if (err) {
63-
window.alert('api error, HTTP CODE: ' + res.status)
68+
window.alert("api error, HTTP CODE: " + res.status);
6469
}
65-
})
70+
});
6671
}
6772

6873
// 返回在vue模板中的调用接口
6974
export default {
70-
get: function (url, params, success, failure) {
71-
return apiAxios('GET', url, params, success, failure)
75+
get: function(url, params, success, failure) {
76+
return apiAxios("GET", url, params, success, failure);
7277
},
73-
post: function (url, params, success, failure) {
74-
return apiAxios('POST', url, params, success, failure)
78+
post: function(url, params, success, failure) {
79+
return apiAxios("POST", url, params, success, failure);
7580
},
76-
put: function (url, params, success, failure) {
77-
return apiAxios('PUT', url, params, success, failure)
81+
put: function(url, params, success, failure) {
82+
return apiAxios("PUT", url, params, success, failure);
7883
},
79-
delete: function (url, params, success, failure) {
80-
return apiAxios('DELETE', url, params, success, failure)
84+
delete: function(url, params, success, failure) {
85+
return apiAxios("DELETE", url, params, success, failure);
8186
}
82-
}
87+
};

‎src/components/dialog.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!-- 子组件 child.vue -->
2+
3+
<template>
4+
<div class="child">
5+
<label>
6+
姓名：<input :placeholder="form.namePla" type="text" v-model="form.name">
7+
</label>
8+
<label>
9+
年龄：<input type="text" v-model="form.age">
10+
</label>
11+
<label>
12+
地址：<input type="text" v-model="form.address">
13+
</label>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
data: function() {
20+
return {
21+
form: {
22+
name: "",
23+
namePla: "",
24+
age: "",
25+
address: ""
26+
}
27+
};
28+
},
29+
props: {
30+
// 这个 prop 属性接收父组件传递进来的值
31+
formData: Object
32+
},
33+
watch: {
34+
// 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
35+
// 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
36+
formData: {
37+
immediate: true,
38+
handler(val) {
39+
this.form = val;
40+
}
41+
}
42+
},
43+
mounted() {
44+
// props 是单向数据流，通过触发 update 事件绑定 formData，
45+
// 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
46+
// 父组件在绑定 formData 的时候，需要加上 .sync
47+
this.$emit("update:formData", this.form);
48+
}
49+
};
50+
</script>

‎src/components/dialogVuex.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!-- 子组件 child.vue -->
2+
3+
<template>
4+
<div class="child">
5+
<label>
6+
姓名：<input type="text" v-model="form.name">
7+
</label>
8+
<label>
9+
年龄：<input type="text" v-model="form.age">
10+
</label>
11+
<label>
12+
地址：<input type="text" v-model="form.address">
13+
</label>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
data: function() {
20+
return {
21+
form: {
22+
name: "",
23+
namePla: "",
24+
age: "",
25+
address: ""
26+
}
27+
};
28+
},
29+
mounted() {
30+
// 将数据提交到 store
31+
this.$store.commit('getFormData', this.form)
32+
}
33+
};
34+
</script>

‎src/router1.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from "vue";
22
import Router from "vue-router";
33
import Home from "./views/Home.vue";
4+
import FormVuex from "./views/FormVuex.vue";
45

56
Vue.use(Router);
67

@@ -13,14 +14,19 @@ export default new Router({
1314
name: "home",
1415
component: Home
1516
},
17+
{
18+
path: "/Vuex",
19+
name: "Vuex",
20+
component: FormVuex
21+
},
1622
{
1723
path: "/about",
1824
name: "about",
1925
// route level code-splitting
2026
// this generates a separate chunk (about.[hash].js) for this route
2127
// which is lazy-loaded when the route is visited.
2228
component: () =>
23-
import(/* webpackChunkName: "about" */ "./views/About.vue")
29+
import(/* webpackChunkName: "about" */ "./views/Form.vue")
2430
}
2531
]
2632
});

0 commit comments

Comments
 (0)