nuxtjs 全局变量添加 asyncData 也可访问

2019-11-26 15:26:10

首先在根据根据官方文档,需要做类似插件的引入方式:

1.  /plugins目录下建立main.js 内容为:

import Vue from 'vue' // vue 文件引入 - 方便在vue方法内容直接 this 调取
import Api from './api' // 自定变量内容 其他自便
 
let main = {
    install(Vue) {
        Vue.prototype.$api = Api; // 变量的内容 后期可以在vue中 this->$api.xxx 使用
    }
};
 
Vue.use(main); // 这里不能丢
 
// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
    // Set the function directly on the context.app object
    app.$api = Api // 名称
};

/plugins/api.js 文件内容:

let host = 'http://api.xxx.xxx';
 
module.exports = {
    getSolidList: host + '/getSolidList.api'
};

关于写这个main是我的写法,为了方便调入其他的自定义变量文件方便后期扩展啥的,可以根据自己的需要改写。

2 . 根目录下 /nuxt.config.js 的 module.exports下添加内容:

module.exports = {
   // ... 其他配置
    plugins: [
        {src: '@/plugins/main', ssr: true}
    ],
  // ... 其他配置
}

3. 关于使用:

async asyncData (params) {
     return { title: params.app.$api.getSolidList }
},
created() {
    console.log(this.title, this.$api.getSolidList);
}
 
// 这样调出的结果确实是一样的。到此全局变量完毕


  • 2019-02-24 09:47:09

    解决Node.js的命令行输出中文乱码问题(也适用于Electron)

    ​一般我们的js文件都是试用utf8编码保存的,但是中文windows的命令行一般默认使用cp936编码(就是gbk),这样我们用js代码 console.log('中文');输出日志的时候,会发现输出的是乱码。 网上有提供一些解决方案,典型的就是用iconv或iconv-lite,把这些中文字符串先转成gbk再输出。 但是这个方案我试了多次,在win10的命令行下,utf8的字符串是成功转成了gbk字符串了(通过打印Buffer可以见到),但是输出还是乱码。

  • 2019-02-25 10:05:41

    Android Socket连接(模拟心跳包,断线重连,发送数据等)

    因为是要保证全局只能有一个连接,而且我们还需要在不同的Activity中发指令,因此肯定不能在需要发指令的界面中都去连接socket,这样一来不好管理,性能也不好,重复代码也会比较多,所以想了一下还是把socket放到service中比较好,发指令功能都放在service中即可。

  • 2019-02-28 15:54:24

    HTTP协议缓存策略深入详解之ETAG妙用

      HTTP协议规格说明定义ETag为“被请求变量的实体值” 。另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端。

  • 2019-02-28 16:46:26

    android获取视频、图片时添加防盗链

    使用HTTP协议时,可以利用头信息中的Referer做防盗链。 我们在一些网站的网页里访问图片的时候,在图片本站是可以正常看到的,但在外头就不能看到了,这是因为在http的header信息中的referer元素。

  • 2019-03-02 11:29:17

    MySQL学习之索引顺序

    这个问题比较简单,MySQL本身会对条件和索引进行判断,这样写可以用到索引,没有问题。

  • 2019-03-06 11:24:19

    MySQL查看数据库表容量大小

    本文介绍MySQL查看数据库表容量大小的命令语句,提供完整查询语句及实例,方便大家学习使用。