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

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

vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
【3D商城】使用Vuex状态管理完成购物车模块
[3D商城]使用Vuex状态管理完成购物车模块创建购物车的全局数据添加产品到购物车导航栏的购物车模块结果常见问题总结创建购物车的全局数据在store的index.js中 ,创建购物车变量 ...
一文带你全面体验八种状态管理库
动手点关注干货不迷路写在前面状态管理库伴随着数据驱动类框架诞生以来,一直都是个带争议的话题,社区里关于这个方向的讨论文章也是数不胜数,本文写作的目的并不是去详细解答每一款状态库的设计原理和最佳实 ...
Vue3 的状态管理库（Pinia）
目录前言: 一.什么是 Pinai 二.安装与使用pinia 三.什么是 store 四.state 1. 定义 state 2. 组件中访问 state 五.Getters 1. 定义 Gette ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
Vue项目成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
灵魂拷问：我们该如何写一个适合自己的状态管理库？
作者|李骏(涅尘) 来源|尔达Erda公众号引言大家好,这里是 Erda 开源项目前端技术团队,今天聊一聊前端的状态管理. 说到状态管理库,想必前端同学随口都能说出好几个来,社区里的轮子一个接 ...
vuex状态管理，用最朴实的话讲解最难懂的技术，
一.案例演示引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm n install vuex --save 需要注意的是这里一定要加上 –sa ...

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

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

最新文章

热门文章