- state:状态库
- mutations:相当于computed属性,改变state状态
- actions:对mutations进行改变
- getters:过滤器,对state调用前的状态进行修改
- modules:模块,处理Store,使分工更清晰
需求:每行都是输入框,可以进行保存;若输入的数据没有保存,点击下一个tab要给予一个提示。
解决方法:
把该页面的数据存储一份;把修改的数据同样也存储一份。若修改前和修改后的数据一样,不需要弹提示框,不一样则弹提示框。
1.把修改前和修改后的数据放在store中state中各存一份;
2.缓存state中数据状态;
3.获取state状态进行比对
state状态
const origan = {
state:{
origanNew: [],
origanBack: [],
officeNew: [],
officeBack: [],
funNew: [],
funBack: [],
departNew: [],
departBack: [],
contactsNew: [],
contactsBack: [],
messageNew: [],
messageBack: []
},
mutations:{
SET_ORIGANNEW: (state, origanNew) => {
state.origanNew = origanNew;
},
SET_ORIGANBACK: (state, origanBack) => {
state.origanBack = origanBack;
},
SET_OFFICENEW: (state, officeNew) => {
state.officeNew = officeNew;
},
SET_OFFICEBACK: (state, officeBack) => {
state.officeBack = officeBack;
},
SET_FUNNEW: (state, funNew) => {
state.funNew = funNew;
},
SET_FUNBACK: (state, funBack) => {
state.funBack = funBack;
},
SET_DEPARTNEW: (state, departNew) => {
state.departNew = departNew;
},
SET_DEPARTBACK: (state, departBack) => {
state.departBack = departBack;
},
SET_CONTRACTSNEW: (state, contactsNew) => {
state.contactsNew = contactsNew;
},
SET_CONTRACTSBACK: (state, contactsBack) => {
state.contactsBack = contactsBack;
},
SET_MESSAGENEW: (state, messageNew) => {
state.messageNew = messageNew;
},
SET_MESSAGEBACK: (state, messageBack) => {
state.messageBack = messageBack;
},
}
}
export default origan;
存数据
// 修改前数据
let newArr = [...this.firstArr,...this.secondArr];
console.log(newArr,'newArr')
this.$store.commit('SET_ORIGANBACK',lodash.cloneDeep(newArr));
// 修改后数据
concatArr(){
this.allData = [...this.tableData,...this.tableData2];
this.$store.commit('SET_ORIGANNEW',this.allData)
},
获取数据对比
let origanNew = this.$store.state.origan.origanNew;
let origanBack = this.$store.state.origan.origanBack;
if(JSON.stringify(origanNew) !== JSON.stringify(origanBack)){
console.log('不相等')
// 弹窗
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
if(e == 1){
this.ruleForm = {
Type: '责任追究领导小组或工作小组',
arr: origanNew
}
}
}
}