【Vue】Re21 VueX 第二部分(Mutations)

一、Mutations携带参数处理

Store状态的更新唯一方式：提交Mutations

Mutations包含两部分：

1、字符串的事件类型【TYPE】

2、一个回调函数【HANDLER】 该函数的第一个参数是state

需求：点击按钮对store中的state属性的student数组增加一个对象元素

App.vue

<template>
  <div id="app">
    <h3>{{message}}</h3>
    <p>
<!--      <button @click="$store.state.count &#45;&#45;"> - </button>-->
      <button @click="aaa"> - </button>
      <!--<span>{{$store.state.count}}</span>-->
      <strong>{{$store.getters.getCount}}</strong>
      <button @click="bbb"> + </button>
<!--      <button @click="$store.state.count ++"> + </button>-->
      <button @click="addStudent">addOneStudent</button>
    </p>

    <ul> <!-- 使用store的getters属性调用 -->
      <li v-for="student in $store.getters.large20Age">
        {{student.id}} | {{student.name}} | {{student.age}} | {{student.gender}}
      </li>
    </ul>

    <ul> <!-- 使用当前组件computed属性调用 -->
      <li v-for="student in largeThan20Age">
        {{student.id}} | {{student.name}} | {{student.age}} | {{student.gender}}
      </li>
    </ul>

    <p>{{$store.getters.large20AgeLength}}</p>

    <p>
      {{$store.getters.getStringJoin}}
    </p>

    <ul>
      <li v-for="student in $store.getters.largeAgeBy(0)">
        {{student.id}} {{student.name}} {{student.age}} {{student.gender}}
      </li>
    </ul>

    <vuex-comp></vuex-comp>
  </div>
</template>
<!-- Actions行为 + View视图 + State状态 -->
<script>
import VueXComp from "./components/VueX";
export default {
  name: 'App',
  data () {
    return {
      message : 'sss',
      // count : 0
    }
  },
  methods : {
    aaa () {
      this.$store.commit('decrement');
    },
    bbb () {
      this.$store.commit('increment');
    },
    addStudent () {
      const student = { id : 118, name : 'alan', age : 22, gender : false }
      this.$store.commit('increaseStudent', student);
    }
  },
  computed : {
    // largeThan20Age () {
    //   return this.$store.state.students.filter(student => {
    //     return student.age >= 20;
    //   });
    // }

    largeThan20Age () {
      return this.$store.state.students.filter(student => student.age >= 20);
    }

  },
  components : {
    vuexComp : VueXComp
  },

}
</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;
}
</style>

store/index.js

import Vue from 'vue';
import VueX from 'vuex';

/* 安装VueX */
Vue.use(VueX);

const store = new VueX.Store({
  state : { /* 状态保存，存放所有组件共享的对象 */
    count : 0,
    str : 'sss',
    students : [
      { id : 110, name : '学生110', age : 28, gender : true, },
      { id : 111, name : '学生111', age : 18, gender : true, },
      { id : 112, name : '学生112', age : 38, gender : false, },
      { id : 113, name : '学生113', age : 14, gender : true, },
      { id : 114, name : '学生114', age : 44, gender : false, },
      { id : 115, name : '学生115', age : 10, gender : true, },
    ]
  },
  mutations : { /*  */
    increment (state) {
      state.count ++
    },
    decrement (state) {
      state.count --
    },
    increaseStudent (state, student) {
      state.students.push(student);
    }
  },
  actions : {

  },
  modules : {

  },
  getters : {
    getStringJoin (state) {
      return state.str + 'saa';
    },
    getCount (state) {
      return state.count;
    },
    large20Age (state) {
      return state.students.filter(student => student.age > 20);
    },
    large20AgeLength (state, getters) {
      return getters.large20Age.length;
    },
    largeAgeBy (state) {
      return (age) => {
        return state.students.filter(student => student.age > age);
      }
    }
  }
});

export default store;

mutations的方法的自定义参数被称为payload，意思负荷，荷载

二、Mutations提交风格

      this.$store.commit({
        type : 'increaseStudent',
        student : student
      });

三、响应规则

详细见，还不能看懂，先留在这里标记一下：

https://www.bilibili.com/video/BV15741177Eh?p=136

136、137、138