Vuex(实现加减操作,Vue.set解决自定义属性没有双向数据绑定)

一、前言

二、主要内容

1、效果

2、分析:

1)点击按钮进行加减操作,肯定要注册一个点击事件,可以给这个点击事件传入一个标识,让他区别什么时候加,什么时候减

2)现在是将加减这一部分单独提取出来的一个公共主键,所以还需要区分每一个主键

3)父组件中在遍历的时候,(food, index) in goods  可以用food来区分每一项

4)从父组件哪里传进来一个food属性(:food="food"),

5)子组件接收到这个food属性,

6)我们用vuex来管理我们的数据状态,所以操作数据的部分尽量在vuex中进行

3、具体实现

1)父组件中传入自定义属性

<!--父组件shopGoods中定义自定义属性food,并且传入-->
<li class="food-item bottom-border-1px" v-for="(food, index) in good.foods" :key="index">

   <div class="cartcontrol-wrapper">
    <CartControl :food=‘food‘></CartControl>
   </div>
</li>

2)子组件中接收,并且使用,接收的目的是为了区分每一项

props: { //接收传入的food
        food: {
            type: Object
        }
    },

3)给“+”,“-”注册点击事件,传进去一个标识,true==加操作, false==减操作

    <transition name="move">
          <div class="iconfont iconremove_circle_outline" v-if="food.count" @click="updateFoodCount(false)"></div>
    </transition>
        <div class="cart-count">{{food.count}}</div>
        <div class="iconfont iconadd_circle" @click="updateFoodCount(true)"></div>
   

4)点击操作执行的时候同时发送一个dispatch交给vuex去处理状态数据

 methods:{
      updateFoodCount(isAdd){
        //如果为true就加
        //如果为false就减
        //但是这里加减不能直接在组件里面写,将这些操作交给vuex处理
        //food.count++
        //要传递参数:需要让后台识别是加还是减:isAdd, 需要让后台知道是哪一个food发生变化,所以需要传过去这两个
        //food一定要加this
        this.$store.dispatch("updateFoodCount",{isAdd,food: this.food})
      }
    }
    

5)vuex结构目录(下面将根据代码执行的步骤来分析)

6)先提交到actions.js里面,actions接收到传过来的参数,根据参数判断加还是减,

//同步更新count,因为不需要去后台后去数据,接收到前面获取的参数isAdd,food
  updateFoodCount({commit},{isAdd, food}){

      //然后判断isAdd=true 加, isAdd=false 减
      if(isAdd){
          //true就commit mutation中的RECEIVE_ADD_COUNT和RECEIVE_DECRESS_COUNT
          commit(RECEIVE_ADD_COUNT,{food})
      }else{
          commit(RECEIVE_DECRESS_COUNT,{food})
      }

  }

7)actions.js中commit到mutations.js中分别根据isAdd的值,去执行不同的函数

//actions.js中commit执行这里的函数
  //加操作
[RECEIVE_ADD_COUNT](state,{food}){
            //如果没有food.count,点一下就加上了这个自定义属性
            //由于这个自定义属性不是响应式的数据,可以用vue插件看到数据改变了,但是视图并没发生变化
            if(!food.count){
                  //food.count=1,视图没有出现
                 // food.count=1
                  Vue.set(food, ‘count‘, 1)  //手动添加数据双向绑定

            }else{
                  food.count++
            }
      },

      //减操作

      [RECEIVE_DECRESS_COUNT](state,{food}){
            food.count--
            if(food.count<=0){
                  food.count=0;
            }

      }

三、总结

原文地址:https://www.cnblogs.com/xxm980617/p/10858340.html

时间: 2024-10-31 07:44:28

Vuex(实现加减操作,Vue.set解决自定义属性没有双向数据绑定)的相关文章

java日期加减操作

1.用java.util.Calender来实现 Calendar calendar=Calendar.getInstance();      calendar.setTime(new Date());    System.out.println(calendar.get(Calendar.DAY_OF_MONTH));//今天的日期    calendar.set(Calendar.DAY_OF_MONTH,calendar.get(Calendar.DAY_OF_MONTH)+1);//让日

关于指针的加减操作

原题: main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)(&a+1); printf("%d,%d",*(a+1),*(ptr-1)); } 程序输出是什么. 解答: 程序输出: 2,5 分析: 这里主要是考查关于指针加减操作的理解. 对指针进行加1操作,得到的是下一个元素的地址,而不是原有地址值直接加1.所以,一个类型为 T 的指针的移动,以 sizeof(T) 为移动单位. 因此,对上题来说,a是一个一维数组,数组中有5个元素:

指针加减操作

正确的输出结果为: 分析:首先,a与&a的地址是一样的,但含义不一样. a是数组元素的首地址,即a[0]的首地址:&a是数组的首地址,即整个数组的首地址. 区别在于,a+1表示数组下一个元素的地址,即a[1]的地址:而&a+1表示下一个对象(数组)的首地址.换而言之,就是在做指针的加减法的时候,地址偏移量的单位是不一样的,前者的偏移量单位是元素,后者的偏移量单位是对象. 其次,sizeof(a)和sizeof(&a)的区别, sizeof(a)是把a作为一个数组类型来测试,

java 实现时间加减操作

public class DateTest { public static void main(String[] args) { /** * 方式一: */ SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Calendar calendar = Calendar.getInstance(); Date now = new Date();// 当前时间 int s = 10 * 60;// 将10分钟

Java对String类型的时间进行加减操作

String time = "2018-08-04 02:30:00";SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        Calendar calendar = Calendar.getInstance();try { calendar.setTime(df.parse(time));} catch (ParseException e) {    // TODO Aut

DateTime操作,时间范围,加减

DB里边存的是char类型数组的时间,例如20151111 12171220000,现在需要把这个时间加减5s,组成 一个时间范围 然后再写存储过程. 想到的办法就是把这个时间先转换成DateTime,然后DateTime本身有可以做加减的方法.做好之后sql的时候有对应的方法 我的解决方法最后是: DateTime dt = DateTime.ParseExact("20151111 12171220000".substring(0,15),"yyyyMMddHHmmss&

Java 中日期的几种常见操作 —— 取值、转换、加减、比较

Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提供了可行的解决方案,并不保证是最佳实践,欢迎讨论. 1. 日期取值 在旧版本 JDK 的时代,有不少代码中日期取值利用了 java.util.Date 类,但是由于 Date 类不便于实现国际化,其实从 JDK1.1 开始,就更推荐使用 java.util.Calendar 类进行时间和日期方面的处

Python中的日期的加减如何实现?

本文和大家分享的主要是python中日期加减操作相关内容,一起来看看吧,希望对大家学习python有所帮助. 1. 日期输出格式化 所有日期.时间的api都在datetime模块内. 1. datetime => string now = datetime.datetime.now() now.strftime('%Y-%m-%d %H:%M:%S')#输出2012-03-05 16:26:23.870105 strftime是datetime类的实例方法. 2. string => date

mysql--timestamp加减

利用timestamp()对timestamp类型进行秒加减操作: 1.加10秒: 2.减10秒: