<template>
<div>
<p>{{this.$store.state.counter}}</p>
<p>{{this.$store.state.info.name}}</p>
<p>{{this.$store.getters.over}}</p>
<p>{{this.$store.getters.overAge(28)}}</p>
<button @click="add">+</button>
<button @click="del">-</button>
<button @click="update">更新</button>
</div>
</template>
<script>
export default {
methods: {
add() {
this.$store.commit('increment')
},
del(){
this.$store.commit('decrement')
},
update(){
this.$store.dispatch('updateInfo')
}
},
}
</script>
<style lang="scss" scoped>
</style>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 1,
students: [
{ id: 23, name: 'mengyangchen', age: 19 },
{ id: 24, name: 'mengyang', age: 20 },
{ id: 24, name: 'meng', age: 29 }
],
info: { name: 'cmc', age: 20 }
},
mutations: {
increment(state) {
state.counter++
},
decrement(state) {
state.counter--;
},
update1(state) {
state.info.name = '李四'
}
},
actions: {
updateInfo(context) {
setTimeout(() => {
context.commit('update1')
}, 1000)
}
},
modules: {
},
getters:{
over(state){
return state.students.filter(s=>s.age<20)
},
overAge(state){
return (age)=>{
return state.students.filter(s=>s.age>age)
}
}
}
})