1. The role of
state , mutations, actions state: store some of the data acquired by the interface call in actions. Mutations
: modify the value stored in the state.
actions: generally used to call the interface, and can call mutations through commit to store data, through dispatch Call the interface in actions to refresh the page and keep the page with the latest data
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)
},
}
}
2. The introduction of mapState..., mapMutations, mapActions
mapStatus and mapGetters are generally introduced in computed, and mapMutations and mapActions are introduced in methods, and the calls are all called through the definition of 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",
}),
}
Introduce the interface in the page
import {
mapState, mapActions, mapMutations } from "vuex";
getCertificationInfoList() {
this.getList({
page: this.page,
size: this.pageSize,
});
},