nuxtjs2.x server 和client的数据共享？

对于在Nuxt.js中实现服务器和客户端数据共享的需求，你可以考虑使用Vuex来管理共享数据。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。

首先，确保你的项目已经安装了Vuex。如果没有安装，你可以使用以下命令进行安装：

npm install vuex

1. 创建一个Vuex store： 在你的Nuxt.js项目中，创建一个名为store的文件夹。在该文件夹中，创建一个名为index.js的文件。在该文件中，你可以定义和导出Vuex store。

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      // 在这里定义你希望共享的数据
      userData: null
    },
    mutations: {
      // 在这里定义修改共享数据的方法
      setUserData(state, userData) {
        state.userData = userData
      }
    },
    actions: {
      // 在这里定义与服务器交互的方法，并在成功后调用mutation
      // 例如，可以在这里发送请求获取用户数据，并在成功后调用setUserData mutation
      fetchUserData({commit}) {
        // 发送请求获取用户数据
        // 成功后调用commit('setUserData', userData)
      }
    }
  })
}

export default createStore

2. 在Nuxt.js中使用Vuex store： 在Nuxt.js中使用Vuex store非常简单。在你的页面组件中，你可以通过this.$store来访问和修改共享数据。

<template>
  <div>
    <p>{{ userData }}</p>
    <button @click="fetchUserData">获取用户数据</button>
  </div>
</template>

<script>
export default {
  computed: {
    userData() {
      return this.$store.state.userData
    }
  },
  methods: {
    fetchUserData() {
      this.$store.dispatch('fetchUserData')
    }
  }
}
</script>

在以上示例中，我们定义了一个共享数据userData和一个用于获取用户数据的方法fetchUserData。通过computed属性userData，我们可以从Vuex store中获取共享数据并在页面中显示。通过methods中的fetchUserData方法，我们可以调用Vuex store中的fetchUserData action。

当页面刷新时，你可以在服务器渲染期间调用Vuex store中的方法来获取用户数据并将其存储在共享数据中。这样，当页面加载完成后，客户端就可以直接从共享数据中获取用户数据，而不需要再发送请求。

希望这个解决方案能够帮助到你！如果你有任何其他问题，请随时问我。