本文共 2751 字，大约阅读时间需要 9 分钟。
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，如需转载请自行联系原作者