-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvuex-state.html
199 lines (194 loc) · 4.72 KB
/
vuex-state.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vuex入門有感</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/obsidian.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Vuex</h1>
<h2>Vuexless</h2>
<p>先來看一下，沒有Vuex時，寫一個例子。</p>
<b>HTML</b>
<pre><code class="html">< div id="app">
< counter :num="count">< /counter>
< p>
< button @click="increment">+< /button>
< button @click="decrement">-< /button>
< /p>
< /div></code></pre>
<b>javascript</b>
<pre><code class="js">const Counter = {
template: `< div>{{ num }}< /div>`,
props: ['num'],
}
const app = new Vue({
el: '#app',
data: {
count: 0
},
components: {
'counter': Counter
},
methods: {
increment () {
this.count++
},
decrement () {
this.count--
}
}
})</code></pre>
<b>Result</b>
<div id="app0">
<counter :num="count"></counter>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
<h2>Vue 的 State</h2>
<p>state into components</p>
<p>要先將 Vuex 宣告出來，並且將 data 搬進 state</p>
<b>JavaScript</b>
<p><code>Vue</code>裡的<code>data</code></p>
<pre><code class="js">const app = new Vue({
data: {
count: 0
},
//...
}</code></pre>
<p>搬到<code>Vuex.Store</code>變成</p>
<pre><code class="js">const store = new Vuex.Store({
state: {
count: 0
}
})</code></pre>
<p>再改寫<code>Components</code>裡，更新內容的機制</p>
<p>將 <code>components</code>的<code>props</code></p>
<pre><code class="js">const Counter = {
//...
props: ['num'],
}</code></pre>
<p>改成 <code>components</code>的<code>computed</code></p>
<pre><code class="js">const Counter = {
//...
computed: {
count() {
return this.$store.state.count
}
}
}</code></pre>
<p><code>Vue</code>的要加上「註冊使用Vuex」</p>
<pre><code class="js">const app = new Vue({
//...
state,
//...
}</code></pre>
<p><code>Components</code>的<code>template</code>的prop傳值機制刪掉</p>
<b>HTML</b>
<p>原本這樣</p>
<pre><code class="html">< counter :num="count">< /counter></code></pre>
<p>改成這樣</p>
<pre><code class="html">< counter>< /counter></code></pre>
<b>改好全部長這樣</b>
<pre><code class="html">< div id="app">
< counter>< /counter>
< p>
< button @click="increment">+< /button>
< button @click="decrement">-< /button>
< /p>
< /div></code></pre>
<pre><code class="js">const store = new Vuex.Store({
state: {
count: 0
}
})
const Counter = {
template: `< div>{{ count }}< /div>`,
computed: {
count() {
return this.$store.state.count
}
}
}
const app = new Vue({
el: '#app',
store,
components: {
'counter': Counter
},
methods: {
increment () {
store.state.count++
},
decrement () {
store.state.count--
}
}
})</code></pre>
<h2>mapState</h2>
<p>這是一個，可以透過<code>Vue</code>實體，存取到<code>Vuex</code>的<code>state</code>的一種機制</p>
<b>javascript</b>
<p>只要加上這一行</p>
<pre><code class="js">var app = new Vue({
data: {
countA: 123 //just for local computed
},
computed: {
// just local computed
countAplus () {
return this.countA + 1
},
//mapState
...Vuex.mapState({
count: state => state.count,
})
},
//...
})</code></pre>
<p>不過，它還有更有意思的用法，就是可以結合 local data 的methods</p>
<pre><code class="js">var app = new Vue({
computed: {
// local computed
...Vuex.mapState({
count: state => state.count + this.countA,
})
},
//...
})</code></pre>
<h2>mapGetter</h2>
<p>就是一個被共用的computed</p>
<script type="text/javascript">
const Counter = {
props: ['num'],
template: `<div>{{ num }}</div>`,
}
const app0 = new Vue({
el: '#app0',
data: {
count: 0
},
components: {
'counter': Counter
},
methods: {
increment () {
this.count++
},
decrement () {
this.count--
}
}
})
</script>
</body>
</html>