在组件和布局中需要使用到相同的数据，改数据需要在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 ）适用设置该方法（其他模块设置了也不会被调用）。  

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/689