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

Love The Way You Lie 2022-09-16 04:58 170阅读 0赞

*  state:状态库
 *  mutations:相当于computed属性，改变state状态
 *  actions:对mutations进行改变
 *  getters:过滤器，对state调用前的状态进行修改
 *  modules:模块，处理Store,使分工更清晰

需求：每行都是输入框，可以进行保存；若输入的数据没有保存，点击下一个tab要给予一个提示。

解决方法：

把该页面的数据存储一份；把修改的数据同样也存储一份。若修改前和修改后的数据一样，不需要弹提示框，不一样则弹提示框。

1.把修改前和修改后的数据放在store中state中各存一份；

2.缓存state中数据状态；

3.获取state状态进行比对

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16][] ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9415f4ca940542779766f875de3e24d2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/dd4d0cf2deca40a7a5b4b16d28037c34.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关状态管理VueX

Vuex是一个专为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂...

逃离我推掉我的手/ 2024年05月23日 18:58/ 0 赞/ 93 阅读

相关 Vuex（状态管理模式）

Vuex：状态管理模式，它采用集中式存储管理应用的所有组件的状态，应用于多级或者多个界面共享，如登录状态，用户名，头像，地理位置，收藏，购物车等项目结构 1> 应用

你的名字/ 2022年12月27日 01:13/ 0 赞/ 220 阅读

相关 vuex状态管理

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人文章目录一、vuex是什么? 二、状态管理

一时失言乱红尘/ 2022年12月03日 08:56/ 0 赞/ 262 阅读

相关 vuex 状态管理

一、vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发

小鱼儿/ 2022年12月02日 01:05/ 0 赞/ 312 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

朴灿烈づ我的快乐病毒、/ 2022年11月19日 11:28/ 0 赞/ 244 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

悠悠/ 2022年11月19日 11:27/ 0 赞/ 289 阅读

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

state:状态库 mutations:相当于computed属性，改变state状态 actions:对mutations进行改变 getters:过

Love The Way You Lie/ 2022年09月16日 04:58/ 0 赞/ 171 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 471 阅读

相关 Vuex状态管理之模块化（精华总结）

Vuex.store中有一个modules属性：官方api文档：[https://vuex.vuejs.org/zh/api/\modules][https_vuex.vuej

小咪咪/ 2021年09月17日 19:20/ 0 赞/ 384 阅读

相关 vue中使用vuex(状态管理)模块管理

1.安装依赖 npm install vuex --save mutations同步改变数据思路：state定义数据，getters和computed类似

男娘i/ 2021年09月02日 08:27/ 0 赞/ 668 阅读