8000 异常处理 · sam9831/mpvue-imooc-ebook-docs@8cf7839 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8cf7839

Browse files
sam9831sam9831
committed
异常处理
1 parent 4c69485 commit 8cf7839

File tree

3 files changed

+537
-2
lines changed

3 files changed

+537
-2
lines changed

‎docs/.vuepress/config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ module.exports = {
7979
'dev/read',
8080
'dev/category-list',
8181
'dev/shelf',
82-
'dev/crash'
82+
'dev/crash',
83+
'dev/error'
8384
]
8485
},
8586
{

‎docs/guide/dev/crash.md

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,159 @@
11
# 异常捕获
22

3-
> 写作中
3+
## 集成 Vuex
4+
5+
安装 vuex：
6+
7+
```bash
8+
npm install -S vuex
9+
```
10+
11+
创建 store.js，源码如下：
12+
13+
```bash
14+
import Vue from 'vue'
15+
import Vuex from 'vuex'
16+
17+
Vue.use(Vuex)
18+
19+
const store = new Vuex.Store({
20+
state: {
21+
error: null
22+
},
23+
mutations: {
24+
setError: (state, message) => {
25+
if (message) {
26+
state.error = { message }
27+
} else {
28+
state.error = null
29+
}
30+
}
31+
}
32+
})
33+
34+
export default store
35+
```
36+
37+
这里的 vuex 中存放了一个 error 状态，mutations 中包含了一个方法 setError，用于更新 error 状态，error 状态是一个对象，包含一个 message 属性，即错误提示
38+
39+
## Global 组件
40+
41+
创建 Global 组件，源码如下：
42+
43+
```html
44+
<template>
45+
<div class="global">
46+
<div class="error" v-if="error">
47+
<div class="error-msg-wrapper">
48+
<div class="error-image">
49+
<ImageView
50+
src="https://www.youbaobao.xyz/resource/icon/crash.png"
51+
/>
52+
</div>
53+
<div class="error-msg">{{error.message || '程序猿紧急抢修中...'}}</div>
54+
<div class="error-retry-wrapper">
55+
<div class="error-retry" @click="retry">重启小程序</div>
56+
</div>
57+
</div>
58+
</div>
59+
<slot v-if="!error"></slot>
60+
</div>
61+
</template>
62+
63+
<script>
64+
import store from '../store'
65+
import { setError } from '../utils/error'
66+
import ImageView from './base/ImageView'
67+
68+
export default {
69+
components: { ImageView },
70+
computed: {
71+
error() {
72+
return store.state.error
73+
}
74+
},
75+
methods: {
76+
retry() {
77+
// 跳转回到首页
78+
let path = getApp().globalData.appOptions.path
79+
if (!path.startsWith('/')) {
80+
path = `/${path}`
81+
}
82+
mpvue.reLaunch({ url: path })
83+
// 重置异常信息
84+
setError()
85+
}
86+
}
87+
}
88+
</script>
89+
90+
<style lang="scss" scoped>
91+
@import '../style/base';
92+
93+
.error {
94+
position: fixed;
95+
top: 0;
96+
width: 100%;
97+
height: 100%;
98+
@include center;
99+
100+
.error-msg-wrapper {
101+
width: 100%;
102+
padding: 0 15px;
103+
box-sizing: border-box;
104+
105+
.error-image {
106+
width: 100%;
107+
padding: 0 15px;
108+
box-sizing: border-box;
109+
}
110+
111+
.error-msg {
112+
width: 100%;
113+
text-align: center;
114+
font-size: 16px;
115+
color: #666;
116+
margin-top: 20px;
117+
}
118+
119+
.error-retry-wrapper {
120+
width: 100%;
121+
@include center;
122+
123+
.error-retry {
124+
border: 1px solid #3696EF;
125+
border-radius: 50px;
126+
text-align: center;
127+
font-size: 13px;
128+
color: #3696EF;
129+
padding: 8px 40px;
130+
margin-top: 10px;
131+
}
132+
}
133+
}
134+
}
135+
</style>
136+
```
137+
138+
Global 是一个容器组件，它最主要的有以下两点：
139+
140+
1. 获取 vuex 中的 error 状态，如果 error 状态不为 null，则显示 error 中的信息
141+
2. 如果 error 状态为 null，则显示 slot 插槽，这部分就是我们自己的组件内容了
142+
143+
## 优化现有组件
144+
145+
将现有组件外层套上 Global 组件即可，这里以 list 组件为例：
146+
147+
```html
148+
<template>
149+
<Global>
150+
<div class="list">
151+
<SearchTable :data="data"/>
152+
</div>
153+
</Global>
154+
</template>
155+
```
156+
157+
::: tip
158+
附赠：[Sam 老师《mpvue 专栏》异常处理章节](../dev/error.html)
159+
:::

0 commit comments

Comments
 (0)
0