vuex

利用vue筛选并传送数据：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 0,
    list: [
      {
        "title": "某xxxx去了学校1",
        "dec": "xxxxxxx学习了vue学习了java",
        "xueli": "大专"
      },
      {
        "title": "某xxxx去了学校2",
        "dec": "xxxxxxx学习了vue学习了前端",
        "xueli": "大专"
      },
      {
        "title": "某xxxx去了学校3",
        "dec": "xxxxxxx学习了vue学习了大数据",
        "xueli": "大专"
      },
      {
        "title": "某xxxx去了学校4",
        "dec": "xxxxxxx学习了vue学习了ui",
        "xueli": "本科"
      },
      {
        "title": "某xxxx去了学校5",
        "dec": "xxxxxxx学习了vue学习了美术",
        "xueli": "本科"
      },
      {
        "title": "某xxxx去了学校6",
        "dec": "xxxxxxx学习了vue学习了云计算",
        "xueli": "本科"
      }
    ]
  },
  /* 类似是Vuex中的计算属性 
  也具有缓存功能：如果state中的数据得到了改变，
  那么getters中的属性的值也会发生改变，
  如果state的值没有发生任何变化，那么getters中的属性
  的值就不会发生改变*/
  getters: {
    /* 计算大专学历的数据 */
    getDaZhuan:function(state){
      return state.list.filter(r=>r.xueli=='大专');
    },
    /* 计算本科学历的数据 */
    getBenke:function(state){
      return state.list.filter(r=>r.xueli=='本科');
    },
    getRandom:function(state){
      return state.num +'--' + Math.random();
    }
  },
  /* 统一在mutations里面修改state中的状态 */
  mutations: {
    /* mutations通过payload来接收commit传过来的参数  */
    ADD(state, payload) {
      /* 模拟从后台获取数据并操作的异步场景 
      在mutations写异步会数据混乱*/
      /* setTimeout(()=>{
        state.num+=payload;
      },500) */
      state.num += payload;
    },
    DEL(state, payload) {
      /* state.num=state.num-payload */
      state.num -= payload;
    }
  },
  actions: {
    /* 异步请求要放在actions方法中去写
    不要再组件里去写，不然就起不到作用 */
    addajax: function ({ commit }, data) {
      setTimeout(() => {
        /* 使用解构出来的commit方法来
        提交一个mutations方法ADD来修改
        state中的值 */
        commit('ADD', data)
      }, 500)
    }
  },

<template>
  <div id="app">
      <h1>{{$store.state.num}}</h1>
      <p>
        选择你要加减的数量：
        <!-- v-model.number可以把字符串类型转成数字类型 -->
        <select v-model="shuzi" @change="changeFn">
          <!-- v-bind:value 使用v-bind也会解析成数字 -->
          <option v-bind:value="1">1</option>
          <option v-bind:value="2">2</option>
          <option v-bind:value="3">3</option>
        </select>
      </p>
      <button @click="add">增加</button> |
      <button @click="del">减少</button>
      <comp-a></comp-a>
      <comp-b></comp-b>

      <button @click="getR">得到getters中的随机数</button>
  </div>
</template>
<script>
import CompA from '@/components/CompA.vue'
import CompB from '@/components/CompB.vue'
export default {
  name:"App",
  components:{
    CompA,
    CompB
  },
  data(){
    return{
      shuzi:1,
      num:0
    }
  },
  methods:{
    getR(){
      console.log(this.$store.getters.getRandom)
    },
    changeFn(){
      console.log('我选择了。。',this.shuzi)
    },
    add(){
      /* 利用commit传值给mutations */
      /* this.$store.commit('ADD',this.shuzi) */
      /* 点击的加的时候需要异步
      那就需要dispatch一个actions方法addajax */
      this.num+=2;
      this.$store.dispatch('addajax',this.num)
    },
    del(){
      this.$store.commit('DEL',this.shuzi)
    }
  }
}
</script>