vuex中mapState...,mapMutations,mapActions的使用

一.state,mutations,actions的作用
state:储存一些在actions中接口调用获取的data
mutations:修改state中储存的值
actions:一般用于调用接口，并且可以通过commit调用mutations,进行储存数据，通过dispatch调用actions里面的接口，实现页面刷新，使页面保持最新的数据

import {
    enterpriseCertification,
    certificationExamine,
    certificationRead,
  } from "../../api/enterpriseCertification";
  import monment from 'moment'
  export default {
    state: {
      total: 0,
      lists:[],
      list:[],
      params: {},
      dialogData:{}
    },
    mutations: {
      setListDatas (state, payload) {            
        state.lists = handelData(payload.list)
        state.list = handelData(payload.list)
        state.total = payload.total
      },
      saveParams (state, payload) {
        state.params = payload
        state.lists = state.list.slice((payload.page-1)*payload.size,payload.page*payload.size)
      },
      changeval(state,newVal){
        state.lists = state.list.filter((v) => {
          return v.applyStatus == newVal;
        });       
      },
    },
    actions: {
      // 获取表格的数据
      async getLists ({ commit }, params) {
        let res = await enterpriseCertification(params)
        commit('setListDatas', res.data) 
        commit('saveParams', params)  
      },
     // 审核
    async examine ({ dispatch, commit, state }, params) {
      await certificationExamine(params)
      dispatch('getLists', state.params)
    },
    // 查看审核信息
    async readInfo ({ dispatch, commit, state }, params) {
      var res = await certificationRead(params)
      dispatch('getLists', state.params) 
    },
    }
  }

二.mapState…,mapMutations,mapActions的引入

import { mapState,mapMutations,mapActions} from "vuex";

mapStatus和mapGetters一般都是在computed里面引入，儿mapMutations和mapActions在methods里面引入，调用都是通过this.定义名来调用

 computed: {
    ...mapState({
      lists: (state) => state.certification.lists,
      total: (state) => state.certification.total,
    }),
  },

 methods: {
    ...mapActions({
      getList: "getLists",
      certificationExamine: "examine",
      certificationRead: "readInfo",
    }),
    ...mapMutations({
      changeval: "changeval",
      searchkey: "search",
    }),
 }

在页面中引入接口

import { mapState, mapActions, mapMutations } from "vuex";
getCertificationInfoList() {
      this.getList({
        page: this.page,
        size: this.pageSize,
      });
    },