export const和 const的区别

4 篇文章 0 订阅

export constconst 是用于定义常量的两种不同方式,并且它们在使用和作用域方面也有一些区别。

  1. constconst 是 JavaScript 中用于声明常量的关键字。通过使用 const 关键字,你可以创建一个只读的、不可更改的常量。一旦使用 const 声明一个变量并初始化它,就不能再对其进行重新赋值。例如:
const PI = 3.14;
  1. export constexport const 是用于在模块中导出常量的语法。通过使用 export const,你可以将一个常量导出供其他模块使用。例如:
// constants.js
export const PI = 3.14;

// 使用模块中的常量
import { PI } from './constants.js';

在上面的示例中,我们将常量 PI 导出到 constants.js 模块中,并在其他模块中使用 import 语句导入该常量。

总结:

  • const 用于声明常量,创建一个只读的、不可更改的变量。
  • export const 用于在模块中导出常量,使其可以在其他模块中使用。

案例分享:在NUXT3+TS+Element-plus中SSR服务端渲染 商品详情页加入购物车或者用户购物车页面删除操作与公共头部购物车图标处数量同步 异步请求发现在函数外部拿不到请求接口出来的值 只能通过这种方式将请求的值赋值给模块中定义的常量 这也全局都能通过引用模块拿到 相当于一个桥梁了 实现了数据同步

import { ref } from 'vue'
export const cartCount = ref(0)

购物车页面

import { cartCount } from '~/store/globalState'
const onAddCort = (formEl: FormInstance | undefined) => {
    if (!formEl)return
    formEl.validate((valid) => {
        if (valid) {
            return getApi.postData('/cart/saveCart', state.ruleForm).then((res) => {
                cartCount.value = res.data.cart_num;
            });
        } else {
            console.log('error submit!')
            return false
        }
    })
}

公共头部

import {cartCount} from '~/store/globalState'

:value=“cartCount”

<span>
    <el-badge :value="cartCount" class="item" @click="$router.push('/order/shoppingCar')">
    	<el-icon><ShoppingCartFull/></el-icon>
    </el-badge>
</span

本人对 NUXT 3框架也是第一次使用,不熟,如果有其他更好的方法实现购物车数量同步,欢迎交流!!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值