vue2
src
main.js
App.vue
store
actions.js
actions.js
index.js
mutations.js
types.js
main.js
import Vue from 'vue' import App from './App.vue' import store from './store/' new Vue({ store, el: '#app', render: h => h(App) })
App.vue
<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
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
export default { count: (state) => { return state.count; }, getOdd: (state) => { return state.count % 2 == 0 ? '偶数' : '奇数' } }
index.js
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
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
export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';