系列导航

mutations和getters用法

一、 效果

二、 目录结构

三、源码

index.js

import {createStore} from 'vuex'
 

export default createStore({
	state: {
		counter: 0,
		students: [
		  {id: 110, name: 'why', age: 18},
		  {id: 111, name: 'kobe', age: 24},
		  {id: 112, name: 'james', age: 30},
		  {id: 113, name: 'curry', age: 10}
		],
		info: {
		  name: 'kobe',
		  age: 40,
		  height: 1.98
		}
	},
	mutations: {
		increament(state) {
			state.counter++
		},
		decrement(state) {
			state.counter--
		},
		incrementCount(state, payload) {
		  state.counter += payload.count
		},
		addStudent(state, stu) {
		  state.students.push(stu)
		},
		updateInfo(state) {
		  state.info.name = 'coderwhy'
		}
	},
	getters:{
		powerCounter(state) {
		  return state.counter * state.counter
		},
		more20stu(state) {
		  return state.students.filter(s => s.age > 20)
		},
		more20stuLength(state, getters) {
		  return getters.more20stu.length
		} ,
        moreAgeStu(state) {
		// return function (age) {
		//   return state.students.filter(s => s.age > age)
		// }
		return age => {
			return state.students.filter(s => s.age > age)
		}
  }
	},
	actions: {},
	modules: {}
})

App.vue