之前虽然一直在用Vue,但并没能理解Vue的本质是什么,今天也是正巧在苦思冥想怎么在外部的JS文件中,调用Vue的多语言插件,返回一个多语言的值时,看着js中如何使用vue-i18n国际化获取相应语言对应字符?这个问题下的回答,去进行了一些尝试后,才猛然意识到,Vue,本质上无论是main.js还是vue文件中的script模块,使用的也就是JS啊,那么逆推的话,在JS中调用vue的插件,和在vue文件中直接使用,差距绝对不应该有多大。
于是经过我的反复尝试后,下面就是我这次尝试的结果了。
vue中各个插件可以直接在js文件中引入并使用,axios、i18n,都是可以直接在js文件中import进来,然后进行使用。与在vue文件中的script中使用并没有太大区别,只是有些地方需要注意。
在js文件中使用this,并不能指定到该vue实例,在vue的js模块中使用this时,可以直接指定到当前使用的这个vue实例中,而在js环境下,这个上下文是不成立的。
因此如果想使用一些与vue实例相关的东西,则需要new出一个vue实例来后才能进行使用。
例如,在js文件中,返回多语言的一句话,就不能直接return this.$t('xxxxx')
,而是要new出一个vue的实例后,把多语言json文件和该vue实例绑定起来,然后调用vue实例.$t('xxxxx')
。
而在js文件中new出Vue实例的方法,和在main.js中new出Vue实例的方法相差无几。
下面给出一个在js文件中创建Vue实例,并绑定vue-i18n,返回相应语言对应字符字符串的例子:
//test.js
import Vue from