mapGetters 辅助函数「建议收藏」

mapGetters 辅助函数「建议收藏」1:mapGetters:辅助函数mapGetters:辅助函数mapGetters:辅助函数仅仅将store中的getter映射到局部计算属性:1:import{mapGetters}from’vuex’2:exportdefault{computer:{//使用对象展开运算符将getter混入computer对象中…mapGetters([‘getMachin…

大家好,又见面了,我是你们的朋友全栈君。

1: mapGetters: 辅助函数

      mapGetters:  辅助函数    mapGetters: 辅助函数仅仅将store 中的 getter 映射到局部计算属性:

1: import { mapGetters } from 'vuex'

2: export default {

   computer: {
     // 使用对象展开运算符 将 getter 混入 computer 对象中

     ...mapGetters ([
          'getMachineList'
      ])
   }
 }

2:  Mutation :  更改 Vuex 的store 中状态的唯一方法提交mutation。 

Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

3:   修改store 中数据:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

4: 你不能直接调用一个 mutation handler。

       这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。

       ”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

store.commit('increment')

5: 提交负荷(payLoad)

   你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)  (Payload:  载荷参数)

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

7: 对象风格提交方式:

    提交 mutation 的另一种方式是直接使用包含 type 属性的对象:

store.commit({
  type: 'increment',
  amount: 10
})

8: 当使用对象风格提交方式的时候: 整个对象都作为载荷传给 mutation 函数; 因此 handle 保持不变。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134324.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python numba_如何用numba加速python?

    python numba_如何用numba加速python?我把写好的 markdown 导入进来 但是没想到知乎的排版如此感人 如果对知乎排版不满想要看高清清爽版 请移步微信公众号原文如何用 numba 加速 python 同时欢迎关注前言说道现在最流行的语言 就不得不提 python 可是 python 虽然容易上手 但速度却有点感人 如何用简单的方法让 python 加速到近乎可以媲美 C 的速度呢 今天来就来谈谈 numba 这个宝贝 对你没看错 不是 numpy 就是 num

    2025年6月11日
    2
  • Systemd日志,journalctl详解[通俗易懂]

    Systemd日志,journalctl详解[通俗易懂]提供:ZStack云计算内容简介作为最具吸引力的优势,systemd拥有强大的处理与系统日志记录功能。在使用其它工具时,日志往往被分散在整套系统当中,由不同的守护进程及进程负责处理,这意味着我们很难跨越多种应用程序对其内容进行解读。相比之下,systemd尝…

    2022年5月20日
    64
  • navicat 15激活码【注册码】

    navicat 15激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    84
  • li清除圆点_li标签的添加圆点

    li清除圆点_li标签的添加圆点不管是ul还是ol中的li前面始终有个小圆点,以前没有发现问题,都是直接给ul增加list-style:none;属性,可今天屡试不爽的属性出现问题了,上图通过两张截图可以清晰的看到虽然小圆点去掉了,但是还是占着位置。典型的占着**不**,而且还影响视图效果,怎么办?先看看样式,里面没有margin或者padding这类的东东,然后看看盒模型,果然:从盒模型可以看到ul有个padding,外围有m…

    2025年7月7日
    2
  • 使用SpringBoot的@Async实现异步调用方法,以及自己开启新线程异步调用

    使用SpringBoot的@Async实现异步调用方法,以及自己开启新线程异步调用一.springboot的@Async注解实现异步要在springboot中使用异步调用方法,只要在被调用的方法上面加上@Async就可以了1.准备工作准备一个springboot工程,在Application类上加上EnableAsync注解开启异步/***@Author:zgd*@Date:18/09/1210:27*@Description:…

    2022年7月11日
    15
  • 网络工程师 PK 软件工程师

    网络工程师 PK 软件工程师

    2021年8月21日
    67

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号