使用vuex 写一个增删改成项目

vuex 最大的特点就是其他页面调用他页面mutations或者addItem中的事件而不是自己查询

例如:在这里插入图片描述

你只需要给他创建事件调用vuex中的事件就行,给vuex传出想要的值
在这里插入图片描述
在这里插入图片描述
给我印象最深的就是vuex中store实例中的筛选属性(getters)
这个属性太过于神奇,就比如实习一个这个的功能点击3个按钮显示同一个数组中的不同状态的数据(在这里选择状态就是已选完成,为完成就是没有选中的)在这里插入图片描述
不使用getters时我遇到的问题时这样的只能点击一次再点别的按钮就得重新刷新才能实现功能(原因时,你每次点击的时候都会把当前数据赋给总数组(总数组就是页面遍历显示的那个数据(数组),然后你再点别的按钮就不是从总数组中查询,而是从你赋给总数组之前那个数据中找,肯定是没有符合条件的))在这里插入图片描述解决方法:使用getters这个属性(不要把符合的数据赋给总数组,而是把符合的数据return出来遍历符合的数据)

另一个页面的代码

  • 三个按钮用一个点击事件,但是三个按钮传的值不一样。Vuex根据按钮的传值来判断return数据,然后在遍历 (三个按钮分别传入的是 全部数据传入的是:all,已完成传入:yiall,未完成传入:weiall)
  • Vuex根据传值不同来判断返回的数据
  • 在Vuex中声明一个变量(viewInput)用来判断 viewInput默认是all页面加载时显示全部

在这里插入图片描述
Vuex中的代码
在这里插入图片描述

  1. state是用来获取Vuex中的变量,ViewInput是用来获取另一个页面传来的值,

在这里插入图片描述

2.listData是所有的数据,根据传来的all yiall weiall 响应的返回数据,给list,所有另一个页面变量list就行
3. listData中有一个属性done,done有俩个值true,false 当复选框选中时done的值为true(这个是直接代码写的)相反为false,所有我们根据这个值返回具体的数据

在这里插入图片描述
遍历list($store.getters)是获取到Vuex页面的getters
然后在获取里面的list在这里插入图片描述

Logo

前往低代码交流专区

更多推荐