Vue----------学习用vuex中的state、mutations和getters实现一些功能

store中的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 1000,
    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
      }
    ],
  },
  mutations: {
    //方法
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    incrementCount(state, count) {
      state.counter += count;
    },
    addStu(state, stu) {
      state.students.push(stu);
    }
  },
  actions: {},
  modules: {},
  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);
      }
    }
  }
})

App.vue

<template>
  <div id="app">
    <h1>------APP中state的内容------</h1>
    <h3>{{ $store.state.counter }}</h3>
    <button @click="sub">-</button><button @click="add">+</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>

    ID: <input type="text" v-model="id" /> 名字：<input
      type="text"
      v-model="name"
    />
    年龄：<input type="text" v-model="age" />
    <button @click="addStu">添加学生</button>

    <hello-world />

    <h1>------APP中getters的内容------</h1>
    <h3>{{ $store.getters.powerCounter }}</h3>

    <h3>年龄大于20岁的学生： {{ $store.getters.more20stu }}</h3>
    <h3>年龄大于输入岁数的学生：{{ $store.getters.moreAgeStu(8) }}</h3>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      message: "我是APP",
      id: "",
      name: "",
      age: "",
    };
  },
  components: {
    HelloWorld,
  },
  methods: {
    add() {
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
    addCount(count) {
      this.$store.commit("incrementCount", count);
    },
    addStu() {
      const stu = { id: this.id, name: this.name, age: this.age };
      this.$store.commit("addStu", stu);
    },
  },
  // computed: {
  //   more20stu() {
  //     return this.$store.state.students.filter((s) => s.age > 20);
  //   },
  // },
};
</script>

<style>
</style>

HelloWorld.vue

<template>
  <div>
    <h1>------Hello中的内容------</h1>
    <h3>{{ $store.state.counter }}</h3>
    <h2>超过20岁的人的个数有：{{ $store.getters.more20stuLength }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
};
</script>
<style scoped>
</style>