在组件和布局中需要使用到相同的数据，改数据需要在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 ）适用设置该方法（其他模块设置了也不会被调用）。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！