文章目录

• 1. asyncData异步数据请求
• 2. 代理配置
• 3. fetch网络请求
• 4. vuex
• • 4.1 state中的数据展示
  • 4.2 同步方法与异步方法
  • 4.3 数据持久化处理
• 5. 中间件处理

1. asyncData异步数据请求

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 和 fetch 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData 方法会在组件（限于页面组件，页面组件就是写在 pages 中的组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

注意：在上面的案例中，虽然是服务端渲染，但还是需要后端做跨域处理，因为单单刷新当前请求数据的页面（或者是地址栏回车）时，由于是服务端渲染，所以不存在跨域，但是如果时通过路由跳转到当前页面时，就会出现跨域问题。

2. 代理配置

假如服务端没有帮我们做跨域处理，我们就需要在 nuxt.config.js 中写代理配置。注意写代理时不能再 baseURL 中写全路径。

  axios: {// baseURL: '/',proxy: true},proxy: {'/api': {target: 'https://api.iynn.cn/film',changeOrigin: true}},server: {// 改端口port: 8080},

3. fetch网络请求

我们现在让子组件来负责数据的展示，而父组件负责数据的请求，使用 axios 该怎么做呢？

父组件：

子组件：

我们在第一小节中就知道，asyncData 方法只能在页面组件中使用，而子组件在 components 中，假如我们现在要将网络请求写在子组件中，该怎么做呢？这时候就需要用到 fetch方法。

父组件：

子组件：

4. vuex

Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

1. 引用 vuex 模块
2. 将 vuex 模块 加到 vendors 构建配置中去
3. 设置 Vue 根实例的 store 配置项

4.1 state中的数据展示

store/count.js：

// 以独立的函数方法来定义vuex中的state数据
// 函数的名称一定叫 state
export const state = () => ({num: 100
})

pages/count/index.vue：

4.2 同步方法与异步方法

store/count.js：

// 以独立的函数方法来定义vuex中的state数据
// 函数的名称一定叫 state
export const state = () => ({num: 100
})// 同步
export const mutations = {addNum(state, payload) {state.num += payload}
}// 异步
export const actions = {asyncAddNum({ commit }, payload) {setTimeout(() => {commit('addNum', payload)}, 1000);}
}

pages/count/index.vue：

推荐插件Nuxt，它可以快速生成 vuex 相关的文件：

使用方式：按下 ctrl+shift+p 输入 nuxt 然后选择 create store ，最后输入文件名称就可以创建成功：

4.3 数据持久化处理

安装js-cookie（客户端路由切换时使用）和cookie-parse（服务端渲染时使用）：

yarn add js-cookie cookie-parse

mock 假数据（static/login.json）：

{"code":0,"msg":"ok","data":{"uid":1000,"token":"fewjlfjewklfewj;fewj;few;"}
}

登录页面：

store/index.js：

export const actions = {// 在服务器加载时，会主动执行1次nuxtServerInit({ commit }, { req }) {// 在服务器端得到当前的cookie数据，cookie数据是通过请求头发送给服务器// string// token=fewjlfjewklfewj%3Bfewj%3Bfew%3B; uid=1000// 方案1let cookieStr = req.headers.cookieif (cookieStr) {let jsonCookie = cookieStr.split(';').reduce((p, c) => {let [key, value] = c.split('=')p[key.trim()] = valuereturn p}, {})// 同步到vuex中 -- 解决刷新丢失问题commit('user/setUserInfo', jsonCookie)}// 方案2// try {//   let cookieStr = req.headers.cookie//   let jsonCookie = cookieStr.split(';').reduce((p, c) => {//     let [key, value] = c.split('=')//     p[key.trim()] = value//     return p//   }, {})//   // 同步到vuex中 -- 解决刷新丢失问题//   commit('user/setUserInfo', jsonCookie)// } catch (error) {// }}
}

store/user/state.js：

export default () => ({uid: 0,token: ''
})

store/user/mutations.js：

export default {setUserInfo(state, payload) {state.uid = payload.uidstate.token = payload.token}
}

5. 中间件处理

在根目录下创建 middleware 文件，每一个中间件都应该放在这个目录下。

middleware/logincheck.js：

export default ({ store, redirect }) => {if (!store.state.user.token) {redirect('/login')}
}

上面这个中间件表示如果不是登录状态，就会重定向到登录页面。

注册全局中间件：

全局中间件就是每进入一个页面都会执行的中间件，相当于全局前置守卫。它需要在 nuxt.config.js 的 router 中进行配置。

  router: {// 全局中间件注册middleware: 'checklogin',// 动态添加路由 但是一定要注意在pages中不能有_.vue这样的文件，否则路由匹配不成功[push]extendRoutes(routes, resolve) {/* routes.push({path: '/abc',component: resolve(__dirname, 'pages/about.vue')}) */// 如果你用_.vue，则需要用unshift方法来动态添加路由信息routes.unshift({path: '/abc',component: resolve(__dirname, 'pages/about.vue')})}},

匹配布局：

相当于路由独享守卫，写在 layouts/default.vue 中。

匹配页面：

相当于组件内守卫。

如果不是登录状态，就跳转到登录页面，用组件内中间件更合适。