Vuex的辅助函数

最新推荐文章于 2024-04-12 10:45:03 发布

z逍遥

最新推荐文章于 2024-04-12 10:45:03 发布

阅读量2.5k

点赞数 2

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zyq51/article/details/108161018

版权

本文介绍了Vuex的辅助函数，重点讲解了mapState，它作为state的语法糖，用于减少在组件中声明计算属性的冗余。通过mapState，可以更方便地管理Vuex状态，提高开发效率。同时，文章提到了mapGetters、mapActions和mapMutations的使用，这些辅助函数在实际应用中同样重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Vuex的辅助函数

辅助函数：mapState、mapGetters、mapActions、mapMutations

2.mapState 辅助函数

官方的解释是:

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

当初在看到这个解释的时候可能觉得非常空洞，难以理解。生成计算属性是什么？少按几次键？？？

mapState是state的语法糖,什么是语法糖?我对语法糖的理解就是,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好,更好的操作"？,用了一段时间后,真香!

3.如何使用

在使用mapState之前,要导入这个辅助函数。

import { mapState } from 'vuex'
1
使用方式

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {
  {count}}
    {
  {dataCount}}
    <button @click="increment">+</button>
    <div>{
  {sex}}</div>
    <div>{
  {from}}</div>
    <div>{
  {myCmpted}}</div>