首页 > 其他分享 >VueX写法对比

VueX写法对比

时间:2023-09-14 10:12:38浏览次数:36  
标签:... countOption VueX sum mapState 写法 对比 store

原始写法

<template>
    <div>
        <h1>当前求和为: {{ sum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
export default {
    name: 'Category',
    data() {
        return {
            n: 1,
            sum: 0
        }
    },
    methods: {
        increment() {
            this.sum += this.n;
        },
        decrement() {
            this.sum -= this.n;
        },
        incrementOdd() {
            if (this.sum % 2) {
                this.sum += this.n;
            }
        },
        incrementWait() {
            setTimeout(() => {
                this.sum += this.n;
            }, 500)
        },
    },
}
</script>

Vuex写法

<script>
import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
export default {
    name: 'Category',
    data() {
        return {
            n: 1,

        }
    },
    computed: {

        // 此处方法相当于上面方法,从state中取数据 对象写法
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        
        // 数组写法,需要计算属性和his.$store.state.sum中sum 名字相同
        ...mapState('countOption',['sum','school','subject']),
        ...mapState('personOption',['personList']),

        // 对象写法
        // ...mapGetters({addAll:'addAll'}),
        // 数组写法
        ...mapGetters('countOption',['addAll'])
    },
    methods: {
        // 在mapMutations中生成对应方法,方法中会调用commit去调用$mutation 对象写法
        ...mapMutations('countOption',{increment:'ADDM',decrement:'ADDL'}),

        // 对象写法 参数要在调用端添加
        ...mapActions('countOption',{incrementOdd:'addLM',incrementWait:'addLMW'})
    },
    mounted() {
    },
}

引入Vuex

main.js
// 引入store 如果填写的是vue可以认识的名称可以忽略不写
import store from './store/index'

标签:...,countOption,VueX,sum,mapState,写法,对比,store
From: https://www.cnblogs.com/aljyailianjiayou/p/17701763.html

相关文章

  • 14 性能对比分析
    packageannotate;importjava.lang.reflect.Constructor;importjava.lang.reflect.Field;importjava.lang.reflect.Method;//性能检测publicclassTest12{//1.普通调用publicstaticvoidtest01(){longstartTime=System.currentTimeMillis(......
  • 深入研究消息队列05 各消息队列集群架构对比
    23RabbitMQ的集群架构集群构建数据可靠性身份认证资源鉴权可观测性......
  • MT6765/MT6762/MT6761核心板性能参数对比
    MT6765/MT6762/MT6761安卓核心板是一款高性能的4G全网通安卓智能模块。该模块支持2G/3G/4G移动、联通、电信等多种网络制式,适用于全球市场的TDD-LTE/FDD-LTE/WCDMA/TD-SCDMA/EVDO/CDMA1X/GSM七种网络制式的智能无线通信模块。其中,MT6761核心板支持四核A532.0GHz主频;MT6762核......
  • (转)对比学习:Golang VS Python3
    原文:https://juejin.cn/post/6844903843050815502Golang和Python都是目前在各自领域最流行的开发语言之一。Golang其高效而又友好的语法,赢得了很多后端开发人员的青睐,最适用于高并发网络编程的语言之一。Python不用说,TIOBE排行榜的前十常驻居民,现在已经稳定在前五了。在机器......
  • 5999元-13999元买哪款?iPhone 15全系四款机型配置/价格对比
    苹果已经在凌晨正式发布了四款iPhone。分别是iPhone15、iPhone15 Plus、iPhone15Pro 和iPhone15ProMax,命名上没有一丝变化。先看价格,首先明确这次苹果起步价没涨,依然是5999元起。iPhone15:128GB5999元、256GB6999元、512GB8999元。iPhone15Plus:128GB6999元、2......
  • SQL if else 判断的写法
    1、语法: 字段1ISNULLTHEN'空'ELSE'不为空'ENDASSTATUSSELECTplan.aaaa,plan.bbbb,ecn.PUID,TO_CHAR(app.PCREATION_DATE,'YYYY')ASyear,TO_CHAR(app.PCREATION_DATE,'mm')ASmonth,CASEWHENworksp.PDATE......
  • Shell脚本中文英文多语言国际化和命令行批处理(bash sh cmd bat)中定义函数的简单写法
    目录命令行脚本参考-bat命令行脚本参考-bash值得学习的知识点1.识别终端使用的语言2.函数的编写3.获取用户的输入4.bat文件老是乱码怎么办有时候为了方便别人使用,我们会选择去编写各种各样的命令行脚本:给Windows用户编写.batcmd批处理脚本,给macOS、Linux用户编写.shbas......
  • 国内几款开源工作流引擎优缺点对比
    1.ccflow优点:易于集成、使用方便、支持工作流设计和自定义扩展、稳定性好,多种场景都可以配置出来。缺点:功能点比较多,学习需要一定的成本。 2.Activiti优点:适合复杂的业务场景、支持分布式部署和高可用性、文档和社区支持丰富。缺点:配置较为复杂、使用语法较为繁琐。 3.Jbpm优......
  • 一图看懂iPhone 15系列:15/Plus/Pro/Pro Max有啥区别?详细配置对比
    距离iPhone15系列发布只剩下2天(北京时间9月13日凌晨1点),即将推出预计分别是iPhone15、iPhone15Plus,以及Pro系列的iPhone15Pro以及iPhone15ProMax。TrendForce集邦汇总了四款新机规格预测。硬件方面,受欧盟订定法案的限制,苹果也将于今年加入Type-C的行列,全新更换C口。iPho......
  • js&jquery(写法对比):get input value(获取input值)
    1.JS写法 2.jquery写法 ......