标签：efault inline store lis on() state rip use map
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‘;
标签：efault inline store lis on() state rip use map
原文地址：http://www.cnblogs.com/yaowen/p/7072363.html
