分享程序员开发的那些事...
更新时间：2022-09-12 09:53:58
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，如需转载请自行联系原作者