vue：vuex的简单使用

<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)  
      }
    }
  }
})