关闭

nuxt.js中全局变量的设定_nuxt如何实现全局初始化功能

时间: 2018-04-23阅读: 6545标签: nuxt

在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?


首页想到的是fetch或者asyncData,但值得注意的是这2个方法在layouts和components中是失效的。所以就想到在vue的钩子函数里面,那就可以通过vuex来管理全局的一个状态的数据,由于每个大项目而言,使用状态树 (store) 管理状态 (state) 十分有必要,nuxt.js内核默认就实现了vuex了。使用的时候就不需要引入了,更加方面,比如在组件里面直接通过 this.$store 来使用状态树。


Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法,可以通过这个方法预先将服务器的数据保存,如已登录的用户信息,系统信息等。另外,这个方法中也可以执行异步操作,并等待数据解析后返回。这里我们需要在在状态树中指定了 nuxtServerInit 方法,下面就简单介绍下实现代码


在store下新建index.js

/*
*
* 根数据状态 存放全局数据和异步方法
*
*/
import axios from 'axios'

export const state = () => ({
  data: null
})

export const mutations = {
  setData (state, n) {
    state.data = n
  }
}

// global actions
export const actions = {
  // 全局服务初始化
  async nuxtServerInit (store, { params, route, req }) {
    return axios.get(process.env.url + '服务器地址').then((res) => {
      //code
      store.commit('setData', r.data)
    }).catch((error) => {
      console.log(error)
    })
  }
}


这里就不讲解vuex的使用了。需要连接请参考连接:Vue.js学习,关于Vuex源码解析

需要注意的是:如果你使用状态树模块化的模式,只有主模块(即store/index.js )适用设置该方法(其他模块设置了也不会被调用)。  



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/689

关闭

Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。

nuxt.js中添加统计代码,添加百度统计,或者google的统计

在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置

webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

Nuxt.js中静态资源的存放位置_assets/static目录区别

在Nuxt.js中静态资源文件分为两类,一类是需要webpack处理的,另外一类是不需要webpack处理的。它们的存放目录是不一样的,下面简单梳理一下。

使用Nuxt生成静态网站

静态网站如今再次流行起来了。信息站和品牌宣传站不再需要使用WordPress之类的内容管理系统来动态更新。使用静态网站生成器,您可以从无源CMS,API

nuxt框架中对vuex进行模块化设置

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!