zoukankan      html  css  js  c++  java
  • vuex的5个核心概念二(mutations)

    3.mutations状态更新(mutations中的方法都是同步的)

    vuex的store状态的更新唯一方式:提交mutation

    mutation主要包括两部分:字符串的事件类型(type)

                一个回调函数(handler),该回调函数的第一个参数就是state

    mutation的定义方式

    通过mutation的更新:this.$store.commit('mutations中的方法名')

     

    (1)在通过mutation更新数据的时候,有可能我们希望传递一些额外的参数,

    mutation定义方法中传递参数

    组件中提交带参数的mutations this.$store.commit('mutations中的方法名',参数)

    (2)传参时如果不是一个参数,而是多个参数,这时通常会以对象的形式传递,也就是payload对象(负载),取信息时从对象中取出

    (3)传递一个对象

    (4)mutation的另一种提交风格,包含一个type属性的对象(以type这种方式提交时,mutation定义方法时参数就是payload对象如2)

    (5)mutation的响应规则

    vuex的store中的state是响应式的,当state中的数据发生改变时,vue组件会自动更新

    这就要求我们遵守一些vuex的对应规则

      1.提前在store中初始化好所需的属性

      2.给state中的对象添加新属性时使用以下方法:Vue.set(obj,'nerProp,123 )或者 用新对象给就对象赋值

    (6)mutation的类型常量

    在mutations中定义了很多事件类型(方法名称),当项目越来越大时,vuex管理的状态越来越多,需要更新的状态也越来越多,所以为了避免出错使用 变量

    来代替方法名。

     注意:Vuex中要求mutation中的方法是同步的。主要是因为我们在使用devtools可以帮助我们捕捉mutation的快照;

      但是如果有异步操作,那么devtools将不能很好的追踪这个操作什么时候会被完成

      所以,通常情况下不要在mutation中进行异步操作

  • 相关阅读:
    [原译]关于源代码控制的五个误区
    [原译]AVALONDOCK 2.0入门指南第一部分
    [原译]11个高效的VS调试技巧
    【原译】一个可定制的WPF任务对话框
    [原译]YAXLib XML序列化神器
    为什么SIZEOF(STR.SUBSTR(0,3).C_STR())=8?
    C#实现GIF图片反转
    转 基于jquery ajax 用户无刷新登录详解介绍
    php中判断文件空目录是否有读写权限
    防止mysql用户root密码弱口令的攻击方法
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12532825.html
Copyright © 2011-2022 走看看