一.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的引入
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,
});
},