export const和 const的区别

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

1. const：const 是 JavaScript 中用于声明常量的关键字。通过使用 const 关键字，你可以创建一个只读的、不可更改的常量。一旦使用 const 声明一个变量并初始化它，就不能再对其进行重新赋值。例如：

const PI = 3.14;

2. export const：export 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框架也是第一次使用，不熟，如果有其他更好的方法实现购物车数量同步，欢迎交流！！！