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

时间: 2018-04-23阅读: 128标签: 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 )适用设置该方法(其他模块设置了也不会被调用)。