vuex辅助函数和模块

mapMutations和mapActions的用法

store:index.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)
    }
  },
  modules: {
  }
})

主页：

<template>
  <div id="app">
    <h1>{{num}}</h1>
    <button @click="addfn(2)">增加</button> |
    <button @click="delfn(2)">减少</button> |
    <button @click="addajax2(5)">异步加</button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name:"App",
  computed:{
    ...mapState(['num']),
    ...mapGetters(['getDaZhuan','getBenke'])
  },
  methods:{
    /* 利用mapMutations方法使用拓展运算符把mutations的方法解构在methods中 
     在this中也可以找到对应解构出来的方法*/
    /* ...mapMutations(['ADD','DEL']), */
    /* 如果mutations中的方法名和methods中的同名了，可以采用对象的形式修改 */
    ...mapMutations({
      addfn:'ADD',
      delfn:'DEL'
    }),
    /* 类似于下面 */
    /* ADD:function(){...},
    DEL:function(){...}, */
    addNum(){
      /* this.$store.commit('ADD',2) */
      /* this.ADD(2) */
      this.addfn(2);
    },
    delNum(){
      /* this.$store.commit('DEL',2) */
      /*  this.DEL(2) */
      this.delfn(2)
    },
    ADD(){
      console.log(2)
    },
    /* 利用mapActions方法使用拓展运算符把actions的方法解构在methods中 
     在this中也可以找到对应解构出来的方法*/
    /* 会在methods中解构成类似的形式 */
    /* addajax:function(){...},*/
    /* ...mapActions(['addajax']), */
    /* 如果actions中的方法名和methods中的同名了，可以采用对象的形式修改 */
    ...mapActions({
      addajax2:'addajax'
    }),
    ajaxfn(){
      this.addajax2(5)
    },
    addajax(){
      console.log(5)
    }
  }
  
  
}
</script>

模块化

模块：

const state ={
    modAStr:'我是moda数据'
}
const getters = {
    strGetters:function(){
        return state.modAStr + 'getter'
    }
}
const mutations = {
    CHANGESTR:function(state,paylod){
        return state.modAStr = paylod
    }
}
const actions = {
    waitfnStr:function({commit},data){
        setTimeout(() => {
            commit('CHANGESTR',data)
        }, 1000);
    }
}

export default {
    namespaced:true,
    state,
    getters,
    mutations,
    actions
}

store中调用：

  modules: {
    modA,
    modB
  }
})

主页中使用

    <h1>{{$store.state.modA.modAStr}}</h1>
    <h1>{{$store.state.modB.modBStr}}</h1>