-
Notifications
You must be signed in to change notification settings - Fork 0
/
day12.html
118 lines (114 loc) · 20.8 KB
/
day12.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Day12 Vuex | Yu jax</title>
<meta name="description" content="test">
<link rel="preload" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css" as="style"><link rel="preload" href="/vuepress-notes/assets/js/app.983685f1.js" as="script"><link rel="preload" href="/vuepress-notes/assets/js/8.77fa9358.js" as="script"><link rel="prefetch" href="/vuepress-notes/assets/js/10.1829f47d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/11.69095bd9.js"><link rel="prefetch" href="/vuepress-notes/assets/js/12.dbbae759.js"><link rel="prefetch" href="/vuepress-notes/assets/js/13.edc40bb1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/14.ec660216.js"><link rel="prefetch" href="/vuepress-notes/assets/js/15.3e2354c4.js"><link rel="prefetch" href="/vuepress-notes/assets/js/16.2c0ae231.js"><link rel="prefetch" href="/vuepress-notes/assets/js/17.083b5622.js"><link rel="prefetch" href="/vuepress-notes/assets/js/18.65c68b6b.js"><link rel="prefetch" href="/vuepress-notes/assets/js/19.16b22c1d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/2.89ad5a90.js"><link rel="prefetch" href="/vuepress-notes/assets/js/20.ed7623b2.js"><link rel="prefetch" href="/vuepress-notes/assets/js/3.4e00d1f1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/4.62b083e6.js"><link rel="prefetch" href="/vuepress-notes/assets/js/5.67d2c5de.js"><link rel="prefetch" href="/vuepress-notes/assets/js/6.60261b9f.js"><link rel="prefetch" href="/vuepress-notes/assets/js/7.cf4b2ab5.js"><link rel="prefetch" href="/vuepress-notes/assets/js/9.06f97c9c.js">
<link rel="stylesheet" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-notes/" class="home-link router-link-active"><!----> <span class="site-name">Yu jax</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/vuepress-notes/" class="sidebar-link">內容簡介</a></li><li><a href="/vuepress-notes/menu.html" class="sidebar-link">菜單總覽</a></li><li><a href="/vuepress-notes/day0.html" class="sidebar-link">Day0 起步工具</a></li><li><a href="/vuepress-notes/day1.html" class="sidebar-link">Day1 古早味事件燉畫面綁定</a></li><li><a href="/vuepress-notes/day2.html" class="sidebar-link">Day2 清爽表單處理佐雙向資料</a></li><li><a href="/vuepress-notes/day3.html" class="sidebar-link">Day3 使用者輸入焗列表呈現</a></li><li><a href="/vuepress-notes/day4.html" class="sidebar-link">Day4 峰峰相連互動式資料表單</a></li><li><a href="/vuepress-notes/day5.html" class="sidebar-link">Day5 天然 CSS 過場佐 jQuery 動畫</a></li><li><a href="/vuepress-notes/day6.html" class="sidebar-link">Day6 異國風情資料觀測與設定</a></li><li><a href="/vuepress-notes/day7.html" class="sidebar-link">Day7 有機發酵生命週期</a></li><li><a href="/vuepress-notes/day8.html" class="sidebar-link">Day8 家鄉通訊錄佐手作</a></li><li><a href="/vuepress-notes/day9.html" class="sidebar-link">Day9 特製雕花 Vue-cli 3.0 與 Node.js 開發環境</a></li><li><a href="/vuepress-notes/day10.html" class="sidebar-link">Day10 科學單檔模組化料理</a></li><li><a href="/vuepress-notes/day11.html" class="sidebar-link">Day11 清燉嫩煮百頁路由</a></li><li><a href="/vuepress-notes/day12.html" class="active sidebar-link">Day12 Vuex</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vuepress-notes/day13.html" class="sidebar-link">Day13 漸進式框架</a></li></ul> </div> <div class="page"> <div class="content"><h3 id="day12-vuex"><a href="#day12-vuex" aria-hidden="true" class="header-anchor">#</a> Day12 Vuex</h3> <h4 id="內容簡介"><a href="#內容簡介" aria-hidden="true" class="header-anchor">#</a> 內容簡介</h4> <p>介紹Vuex</p> <h4 id="重點整理"><a href="#重點整理" aria-hidden="true" class="header-anchor">#</a> 重點整理</h4> <ul><li>Action 主要處理API同步</li> <li>Mutations 改動stats</li> <li>State 存放資料</li></ul> <h4 id="基本介紹"><a href="#基本介紹" aria-hidden="true" class="header-anchor">#</a> 基本介紹</h4> <img src="https://i.imgur.com/z6jlR79.png">
- Action 主要處理API同步
- Mutations 改動stats
- State 存放資料
新增vuex套件
<img src="https://i.imgur.com/veUb3ZN.png">
新增完後就有stroe.js 資料皆放在裡面
<div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
strict<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
state<span class="token punctuation">:</span> <span class="token punctuation">{</span>
day<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
header<span class="token punctuation">:</span> <span class="token punctuation">{</span>
src<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'Vue test'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
list<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token constant">SETDAY</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> day<span class="token punctuation">)</span> <span class="token punctuation">{</span>
state<span class="token punctuation">.</span>day <span class="token operator">=</span> day
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">SETLIST</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> list<span class="token punctuation">)</span> <span class="token punctuation">{</span>
state<span class="token punctuation">.</span>list <span class="token operator">=</span> list
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token constant">GETLIST</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> day<span class="token punctuation">)</span> <span class="token punctuation">{</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SETDAY'</span><span class="token punctuation">,</span> day<span class="token punctuation">)</span>
<span class="token keyword">return</span> axios<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/list.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>res <span class="token operator">=></span> <span class="token punctuation">{</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SETLIST'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>並且利用axios 監聽list.json(DB)將list.json裡的資料丟進list空陣列中</p> <p>資料都丟在stroe.js裡面了 所以index.vue裡面的資料會變成函示來呼叫</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
day<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>day<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token keyword">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// this.$store.state.day = val;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">"SETDAY"</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">header</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>header<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">list</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>list<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token function">changeHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> day <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>day<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">39</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
day <span class="token operator">=</span> day <span class="token operator"><</span> <span class="token number">19</span> <span class="token operator">?</span> day <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">:</span> day<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">37</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
day <span class="token operator">=</span> day <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> day <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">:</span> day<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// this.day = day;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
params<span class="token punctuation">:</span> <span class="token punctuation">{</span>
day<span class="token punctuation">:</span> day <span class="token operator">+</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> day <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>day<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token comment">//this.day = day;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">"GETLIST"</span><span class="token punctuation">,</span> day<span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>changeHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token function">$route</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> day <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>day<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>day <span class="token operator">=</span> day<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>以及利用vue內建函示$router.replace來讓網址更新</p> <img src="https://i.imgur.com/T1p0i6z.png"> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/FSTXQfKzy7s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></center></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vuepress-notes/day11.html" class="prev">
Day11 清燉嫩煮百頁路由
</a></span> <span class="next"><a href="/vuepress-notes/day13.html">
Day13 漸進式框架
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vuepress-notes/assets/js/app.983685f1.js" defer></script><script src="/vuepress-notes/assets/js/8.77fa9358.js" defer></script>
</body>
</html>