iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuex的辅助函数该如何使用
  • 247
分享到

vuex的辅助函数该如何使用

2024-04-02 19:04:59 247人浏览 泡泡鱼
摘要

目录mapStatemapGettersmapMutationsmapActiOS多个modulesmapState import { mapState } from 'Vuex

mapState


import { mapState } from 'Vuex'

export default {
  // ...
  computed:{
     ...mapState({
         // 箭头函数可使代码更简练
         count: state => state.count,
         // 传字符串参数 'count' 等同于 `state => state.count`
         countAlias: 'count',

         // 为了能够使用 `this` 获取局部状态,必须使用常规函数
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}

定义的属性名与state中的名称相同时,可以传入一个数组


//定义state
const state={
    count:1,
}

//在组件中使用辅助函数
computed:{
    ...mapState(['count'])
}

mapGetters


computed:{
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}

当属性名与getters中定义的相同时,可以传入一个数组


computed:{
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

总结

  • mapState与mapGetters都用computed来进行映射
  • 在组件中映射完成后,通过this.映射属性名进行使用

mapMutations


methods:{
    ...mapMutations({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
}

当属性名与mapMutatios中定义的相同时,可以传入一个数组


methods:{
    ...mapMutations([
        'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

        // `mapMutations` 也支持载荷:
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
}

mapActios


mathods:{
    ...mapActions({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}

当属性名与mapActios中定义的相同时,可以传入一个数组


methods:{
    ...mapActions([
        'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`	
        // `mapActions` 也支持载荷:
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

总结

  • mapMutations与mapActios都在methods中进行映射
  • 映射之后变成一个方法

多个modules

在不使用辅助函数的时候,


this.$store.commit('app/addCount')

使用辅助函数,辅助函数的第一个参数给定命名空间的路径


computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

或者使用 createNamespacedHelpers函数来创建一个基于命名空间的辅助函数


import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //给定路径
//使用方法与之前相同
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

以上就是vuex的辅助函数该如何使用的详细内容,更多关于vuex的辅助函数的资料请关注编程网其它相关文章!

--结束END--

本文标题: vuex的辅助函数该如何使用

本文链接: https://www.lsjlt.com/news/128549.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vuex的辅助函数该如何使用
    目录mapStatemapGettersmapMutationsmapActios多个modulesmapState import { mapState } from 'vuex...
    99+
    2024-04-02
  • vuex辅助函数如何用
    今天小编给大家分享一下vuex辅助函数如何用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。mapStateimport&nb...
    99+
    2023-07-04
  • vuex中辅助函数mapGetters怎么使用
    这篇“vuex中辅助函数mapGetters怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看...
    99+
    2024-04-02
  • 关于Vue的 Vuex的4个辅助函数
    目录一、辅助函数二、实例1、mapState 和 mapGetters2、mapMutations和mapActions一、辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明...
    99+
    2024-04-02
  • vuex 中辅助函数mapGetters的基本用法详解
    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1、在组件或界面中不使用mapGetter调用映射vuex中...
    99+
    2024-04-02
  • vue的辅助函数怎么使用
    本篇内容主要讲解“vue的辅助函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue的辅助函数怎么使用”吧! vue的辅助...
    99+
    2024-04-02
  • laravel常用辅助函数
    array_add() array_add 函数添加给定键值对到数组 —— 如果给定键不存在的话: $array = array_add(['name' => 'Desk'], 'price', 100);// ['name' => 'D...
    99+
    2023-09-13
    laravel php
  • 如何解决mpvue+vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用的问题
    这篇文章主要介绍如何解决mpvue+vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题分析•...
    99+
    2024-04-02
  • laravel辅助函数怎么用
    小编给大家分享一下laravel辅助函数怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!用法:1、dd()函数用于打印出给定的变量和结束脚本的运行,语法为“d...
    99+
    2023-06-29
  • Laravel辅助函数有哪些及怎么使用
    这篇文章主要介绍“Laravel辅助函数有哪些及怎么使用”,在日常操作中,相信很多人在Laravel辅助函数有哪些及怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Laravel辅助函数有哪些及怎么使用...
    99+
    2023-07-04
  • Linux如何安装并使用数仓开发辅助神器DBeaver
    这篇文章主要介绍了Linux如何安装并使用数仓开发辅助神器DBeaver,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。DBeaver 是一个基于 Java 开发,免费开源的通...
    99+
    2023-06-27
  • 如何添加Vue的辅助功能
    随着前端框架的不断发展,Vue作为其中之一的代表,在前端开发中扮演着重要的角色。Vue具有简单易学、灵活性强、性能高等优点。但是Vue的基本功能是有限的,如果想要实现更复杂的功能,需要添加一些辅助功能。本文将介绍如何添加Vue的辅助功能,以...
    99+
    2023-05-14
  • 如何使用icon fonts来辅助CSS处理图片
    这篇文章主要讲解了“如何使用icon fonts来辅助CSS处理图片”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用icon fonts来辅助CSS处...
    99+
    2024-04-02
  • Linux系统shell函数该如何使用
    这篇文章主要为大家分析了Linux系统shell函数该如何使用的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Linux系统shell函数该如何使用”的知识吧...
    99+
    2023-06-28
  • Python 数据处理更容易的12个辅助函数总结
    目录Numpy 的 6 种高效函数argpartition()allclose()clip()extract()where()percentile()Pandas 数据统计...
    99+
    2024-04-02
  • 如何通过Oracle来辅助MySQL数据问题的恢复
    这篇文章将为大家详细讲解有关如何通过Oracle来辅助MySQL数据问题的恢复,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。今天琢磨一个问题,在平时的工作中如果碰到一些不...
    99+
    2024-04-02
  • 如何使用Vuex
    小编给大家分享一下如何使用Vuex,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么是Vuex?vuex是一个专门为vue.js...
    99+
    2024-04-02
  • vuex如何使用
    这篇文章主要为大家展示了“vuex如何使用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vuex如何使用”这篇文章吧。什么是Vuex?vuex是一个专门为vue...
    99+
    2024-04-02
  • 介绍C语言程序中的注释等辅助语句如何使用
    目录一、程序中的辅助语句(上)二、程序中的辅助语句(下)一、程序中的辅助语句(上) C语言中的注释 注释是帮助理解程序而编写的文本注释本身对程序功能无任何贡献注释分为单行注释和多行注...
    99+
    2024-04-02
  • 算法实现中,如何使用日志记录来辅助调试?
    在算法实现过程中,调试是一个非常重要的环节。调试的目的是为了找出程序中的错误,并且修复它们。在调试过程中,日志记录是一个非常有用的工具,它可以帮助我们更好地理解程序的运行情况,以及发现程序中的问题。在本文中,我们将介绍如何使用日志记录来辅...
    99+
    2023-06-04
    日志 shell 编程算法
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作