vuex:状态管理库,分5大模块:

• 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
              }
            }
 }
      }