nuxt 自定义全局方法、全局属性、全局变量解决方案

注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以,

asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客

好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取

commom.js 测试代码

import Vue from 'vue'
var comsys= {
    install(Vue){
        Vue.prototype.comsys = {
        	val:function(val){
        		return val
        	}
        };
        
    }
}
Vue.use(comsys);


nuxt.config.js里  添加

plugins: [
	    { src: '~/plugins/commom.js', ssr: false }
	],

引用的页面添加

mounted () {
			 alert(this.comsys.val(1));
		}

恩  这样就行了  

这个是实例方法  其他的属性  对象  可以参考  vue的官网   

好,点不点赞看你了,或者 可以加入 我的 群153181864  前端交流群 ,绝对原创,转载请附上 本微博链接。

### 如何在 Nuxt 3 中扩展全局属性 #### 使用 Composition API 扩展全局属性 为了向 Vue 组件注入全局可用的属性,在 `plugins` 目录下创建一个新的文件,比如命名为 `globalProperties.client.ts` 或者 `.server.ts` 来区分客户端和服务端逻辑。在这个文件里可以通过调用 `app.config.globalProperties` 方法设置全局变量[^1]。 ```typescript // plugins/globalProperties.client.ts export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.config.globalProperties.$myGlobalMethod = () => { console.log('This is a global method'); }; }); ``` 上述代码片段展示了如何通过定义插件的形式给所有的 Vue 实例添加方法 `$myGlobalMethod` 。当任何地方调用了这个函数时都会打印一条消息到浏览器控制台中去。 #### 利用 Pinia 进行状态管理 对于复杂的应用程序来说,推荐使用 Pinia 库来进行集中式的状态管理。Pinia 提供了一种结构化的方式来存储和共享数据,这使得跨页面传递信息变得容易得多。安装并配置好之后可以在 store 文件夹内编写相应的 Store 类,并将其导出以便其他部分能够访问[^2]。 ```bash npm install @pinia/nuxt pinia ``` 接着按照官方文档指引完成初始化过程: ```javascript // stores/counterStore.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore({ id: 'counter', state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` 最后记得更新项目的配置文件以启用此功能: ```typescript // nuxt.config.ts export default defineNuxtConfig({ modules: ['@pinia/nuxt'], }) ``` 这样就可以轻松地在整个项目范围内获取或修改计数器的状态了。 #### 配置 TailwindCSS 自定义样式 如果想要自定义一些 CSS 属性作为全局默认值,则可以考虑引入像 TailwindCSS 这样的工具链。其优势在于提供了丰富的预设类名集合以及灵活的主题定制选项。只需编辑 `tailwind.config.cjs` 即可调整字体大小、间距单位等一系列视觉参数[^4]。 ```javascript // tailwind.config.cjs module.exports = { theme: { extend: { colors: { primary: '#ff5722', // 主色调 } } } } ``` 以上就是在 Nuxt 3 中几种常见的扩展全局属性的方式及其背后的最佳实践原则。每一种方案都有各自的特点和适用场景,请根据实际需求做出合理的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪狼之夜

打个赏,让博主知道博文没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值