1. El rol del
estado , mutaciones, acciones estado: almacena algunos de los datos adquiridos por la interfaz llamada en acciones. Mutaciones
: modifica el valor almacenado en el estado.
Acciones: generalmente se usa para llamar a la interfaz, y puede llamar mutaciones a través de la confirmación para almacenar datos, mediante el envío Llamar a la interfaz en acciones para actualizar la página y mantener la página con los datos más recientes
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. La introducción de mapState ..., mapMutations, mapActions
mapStatus y mapGetters generalmente se introducen en computed, y mapMutations y mapActions se introducen en métodos, y todas las llamadas se llaman a través de la definición de este.
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 la interfaz en la página.
import {
mapState, mapActions, mapMutations } from "vuex";
getCertificationInfoList() {
this.getList({
page: this.page,
size: this.pageSize,
});
},