nuxt使用vuex存储及获取用户信息踩坑的解决

在使用Nuxt.js开发项目时，我们可能会需要使用Vuex来存储和获取用户信息。虽然Vue.js和Nuxt.js本身提供了良好的支持，但在实际开发中还是有一些坑需要注意。本文将介绍一些我在使用Vuex存储及获取用户信息时遇到的问题及解决方法。

1. 初始状态为空

在使用Vuex存储用户信息时，初始状态可能是空的。如果直接在页面中使用该信息，可能会导致一些问题。因此，我们需要在页面中判断该信息是否存在，如果不存在则进行相应的处理。

解决方法：在页面中使用v-if指令判断用户信息是否存在，如果不存在则显示相应的内容，如登录按钮，否则显示用户信息。

<template>
  <div>
    <button v-if="!user" @click="login">登录</button>
    <div v-else>
      用户名：{{ user.username }}
      <button @click="logout">退出</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    login() {
      // ...
      this.$store.commit('login', { username: 'xxx' })
    },
    logout() {
      // ...
      this.$store.commit('logout')
    }
  }
}
</script>

2. 刷新页面信息消失

在使用Nuxt.js开发项目时，由于使用的是服务端渲染，页面在每次刷新时会重新拉取数据，因此，我们需要在每次刷新页面时获取用户信息并存入Vuex。

解决方法：在使用Nuxt.js时，我们可以在nuxtServerInit方法中获取用户信息并存入Vuex。

// store/index.js
export const state = () => ({
  user: null
})

export const mutations = {
  login(state, user) {
    state.user = user
  },
  logout(state) {
    state.user = null
  }
}

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    if (req.session && req.session.user) {
      commit('login', req.session.user)
    }
  }
}

3. 服务器端重定向

在使用Nuxt.js开发项目时，可能会遇到服务器端重定向的情况，此时我们需要在服务器端处理用户信息。

解决方法：在服务器端重定向时，我们可以将用户信息存入session中，并在nuxtServerInit方法中获取。

// pages/profile.vue
export default {
  name: 'Profile',
  async asyncData({ store, redirect }) {
    const { data } = await axios.get('/api/profile')
    if (data.code === 0) {
      store.commit('login', data.data.user)
      return { user: data.data.user }
    } else {
      redirect('/login')
    }
  }
}

// server/api/profile.js
router.get('/', async (req, res) => {
  if (req.session && req.session.user) {
    const user = await userModel.findOne({ _id: req.session.user._id })
    res.json({ code: 0, data: { user } })
  } else {
    res.json({ code: -1, msg: '未登录' })
  }
})

4. 热重载问题

在使用Nuxt.js时，如果修改了Vuex中的状态，则需要重启服务才能生效。如果想使用热重载，则需要在nuxt.config.js中进行配置。

解决方法：在nuxt.config.js中添加以下代码。

export default {
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.devtool = 'inline-source-map'
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

总结

以上是在使用Nuxt.js开发项目时使用Vuex存储及获取用户信息可能遇到的一些问题及解决方法。我们应该在项目中根据实际情况进行相应的处理，以避免出现意外的问题。