src
main.js
App.vue
store
actions.js
actions.js
index.js
mutations.js
types.js
main.js
|
1
2
3
4
5
6
7
8
9
10
|
import
Vue from
'vue'
import
App from
'./App.vue'
import
store from
'./store/'
new
Vue({
store,
el:
'#app'
,
render: h => h(App)
})
|
App.vue
|
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
|
<
template
>
<
div
id="app">
<
h3
>welcome vuex-demo</
h3
>
<
input
type="button" value="增加" @click="increment">
<
input
type="button" value="减少" @click="decrement">
<
input
type="button" value="偶数才能点击+" @click="clickOdd">
<
input
type="button" value="点击异步" @click="clickAsync">
<
div
>
现在数字为: {{count}}, 它现在是 {{getOdd}}
</
div
>
</
div
>
</
template
>
<
script
>
import {mapGetters, mapActions} from 'vuex'
export default{
computed:mapGetters([
'count',
'getOdd'
]),
methods:mapActions([
'increment',
'decrement',
'clickOdd',
'clickAsync'
])
}
</
script
>
<
style
>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</
style
>
|
action.js
|
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
|
import
* as types from
'./types'
export
default
{
increment: ({
commit
}) => {
commit(types.INCREMENT);
},
decrement: ({
commit
}) => {
commit(types.DECREMENT);
},
clickOdd: ({
commit,
state
}) => {
if
(state.mutations.count % 2 == 0) {
commit(types.INCREMENT);
}
},
clickAsync: ({
commit
}) => {
new
Promise((resolve) => {
setTimeout(
function
() {
commit(types.INCREMENT);
}, 1000);
})
}
}
|
getters.js
|
1
2
3
4
5
6
7
8
|
export
default
{
count: (state) => {
return
state.count;
},
getOdd: (state) => {
return
state.count % 2 == 0 ?
'偶数'
:
'奇数'
}
}
|
index.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import
Vue from
'vue'
import
Vuex from
'vuex'
Vue.use(Vuex);
import
mutations from
'./mutations'
import
actions from
'./actions'
export
default
new
Vuex.Store({
modules:{
mutations
},
actions
});
|
mutation.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import
{
INCREMENT,
DECREMENT
} from
'./types'
import
getters from
'./getters'
const state = {
count: 20
};
const mutations = {
[INCREMENT](state) {
state.count++;
},
[DECREMENT](state) {
state.count--;
}
};
export
default
{
state,
mutations,
getters
}
|
types.js
|
1
2
3
|
export
const INCREMENT =
'INCREMENT'
;
export
const DECREMENT =
'DECREMENT'
;
|
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7072363.html，如需转载请自行联系原作者
