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-05-05 14:04:11

    PHP使用CURL模拟POST/GET/PUT/DELETE方式提交数据

    最近因为工作需要,调用网盘接口来上传文件,我用了CURL库, 当然在用CURL库之前必须要在php中启用 cURL 设置 可以通过使用php_info()函数来得到cURL信息,如果看不到cURL信息的话,那么需要设置PHP并开启这个库。在Windows平台下,需要改一改php.ini文件的设置,找到 php_curl.dll,并取消前面的分号注释就行了。

  • 2019-05-07 00:04:04

    Tcpdf不使用css来实现线上合同和签章,图片悬浮

    以前虽然有了解过Tcpdf的用法,但是没有实际的应用过,最近在用tcpdf的时候发现对css支持很有限,使的如果想实现类似html的种种效果都很难,而我这次要做的就是 图片悬浮在文字上方形成类似水印或者盖章的效果。

  • 2019-05-09 11:46:30

    Glide使用高级技巧(解决Glide生成缓存Key问题)

    虽说Glide将缓存功能高度封装之后,使得用法变得非常简单,但同时也带来了一些问题。 比如之前有一位群里的朋友就跟我说过,他们项目的图片资源都是存放在七牛云上面的,而七牛云为了对图片资源进行保护,会在图片url地址的基础之上再加上一个token参数。也就是说,一张图片的url地址可能会是如下格式:

  • 2019-05-13 14:34:42

    linux系统中清理MySql的日志文件,打印日志文件

    默认情况下mysql会一直保留mysql-bin文件,这样到一定时候,磁盘可能会被撑满,这时候是否可以删除这些文件呢,是否可以安全删除,是个问题。 首先要说明一下,这些文件都是mysql的日志文件,如果不做主从复制的话,基本上是没用的,虽然没用,但是不建议使用rm命令删除,这样有可能会不安全,正确的方法是通过mysql的命令去删除。