Vue 全局实例，我想单独在js里面用（权限路由的时候或者拦截器时候），填坑之路，

最新推荐文章于 2025-05-18 09:00:00 发布

Record Life

最新推荐文章于 2025-05-18 09:00:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： Vue全局实例随处引用

本文链接：https://blog.youkuaiyun.com/qq_28929589/article/details/82886731

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Vue项目中正确使用实例方法进行校验，解决因this指向错误导致的问题，通过在main.js中导出Vue实例并重新引用，确保I18n国际化在验证规则中正常工作。

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

首先我有一个校验需要用到vue实例


export const rules =  {
    empty: [
        (value) => !!value || this.$t('valid.empty'),
    ],
    email: [
        (value) => !!value || this.$t('valid.emailEmpty'),
        v => /.+@.+/.test(v) || this.$t('valid.emailValid')
    ],
    username: [
        v => !!v || this.$t('valid.username')
    ],
    password: [
        v => !!v || this.$t('valid.password'),
        v => v.length >= 6 || this.$t('valid.passwordLength')
    ]
  }

但是这里面有一个I18n的国际化，this指向错误

解决，在main.js里面，把这个实例导出

/* eslint-disable no-new */
export default new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: '<App/>'
});

然后如下

import vue from '@/main'
export const rules =  {
    empty: [
        (value) => !!value || vue.$t('valid.empty'),
    ],
    email: [
        (value) => !!value || vue.$t('valid.emailEmpty'),
        v => /.+@.+/.test(v) || vue.$t('valid.emailValid')
    ],
    username: [
        v => !!v || vue.$t('valid.username')
    ],
    password: [
        v => !!v || vue.$t('valid.password'),
        v => v.length >= 6 || vue.$t('valid.passwordLength')
    ]
  }

如果你有更好的办法请告诉我。我需要你的帮助

如果你觉得好就点个赞。