nuxtjs中使用SSR开发关于前端vuex请求后台的问题

在这个问题中遇到了两个比较常见的问题：他们的报错情况分别如下：

1.

报错Classic mode for store/ is deprecated and will be removed in Nuxt 3.

2.

Error occurred when calling nuxtServerInit:  socket hang up

接下来分别对以上问题做如下讲解：

1. 针对第一个问题出现这种错误的原因是：nuxt3版本中已经移除了对原始vuex这种编程，出现这种错误的代码如下：

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    strict: false,
    state: () => ({
      counter: 0
    }),
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore

解决的办法如下： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块），在index.js文件中：

import geo from './geo'
 export const actions = {
      async nuxtServerInit({
        commit
      },{req,app}) {
        const {status,data: {province,city}} = await app.$axios.get('/geo/getPosition')
        commit('geo/setPosition',status === 200 ? {province, city} : {province: '', city: ''})   
        // const {status:status2, data: {menu}} = await app.$axios.get('/geo/menu')
        // commit('home/setMenu',status2===200?menu:[])
      }
  }

在geo.js中：

const state = () => ({position: {}})

const mutations = {
  setPosition(state, val) {
    state.position = val
  }
}

const actions = {
  setPosition: ({
    commit
  }, position) => {
    commit('setPosition', position)
  }
}


export default {namespaced: true, state, mutations, actions}

项目的目录结构如下： 

解释：index.js中的  import geo from './geo' 表示将geo.js引入，其中的

中的 geo/setPosition表示的是geo.js文件中的setPosition。

这样的话便可以解决上面的问题了，当然如果你使用的nuxtjs是2版本的是不会出现这种错误的。

2.针对上面的第二个问题，这种报错的原因很简单，这种错误的意思是没有请求到后台的接口地址，如何确定这种错误的原因呢?其实很容易，只需要将请求的接口换成一个可以使用的后台的接口来测试一下是否可以走通，是否不会出现同样的错误即可，我使用的测试的接口为我后台的/users/getUser接口，发现是可以走通的，那么这便说明我没有请求到后台的接口，没有请求到后台接口的错误原因也可以分为两个：第一，vuex中的接口书写错误。第二，后台服务中操作数据库没有成功。对于第二个原因的测试方法是打开postman测试工具来进行测试，我测试完之后发现是可以走通的，但是还是出现错误，经过排查是因为我后台的接口前缀写错了，我后台接口的忘记写前面的反斜杠了，而前台写了反斜杠，所以出现了刚才的那种错误。