NUXT.JS学习笔记


目录结构

├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│ └── logo.jpg // 默认logo图片
├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│ └── AppLogo.vue // 默认logo组件
├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 标签中。
│ └── default.vue // 默认模板页面，类似mvc中的layout
├── middleware // 中间件。存放中间件。可以在页面中调用： middleware: ‘middlewareName’ 。
├── pages 　 // 页面。一个 vue 文件即为一个页面。
│ └── index.vue // 默认首页面
├── plugins // 用于存放JavaScript插件的地方
│ └── element-ui.js // 上边我们安装的UI框架
├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
├── store 　 // 用于组织应用的Vuex 状态管理。
├── .editorconfig // 开发工具格式配置
├── .eslintrc.js // ESLint的配置文件，用于检查代码格式
├── .gitignore // 配置git不上传的文件
├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置
├── package.json // npm包管理配置文件
└── README.md // 说明文档

创建项目

1
2
3
4
$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

asyncData

asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的，所以，请求数据时，不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

请求方式一：

1
2
3
4
5
6
7
8
9
asyncData ({ params }) {//请求
        return  axios({
        method: 'get',
        url: '后台api接口'
        })
        .then(function (response) {
          return { posts: response.data.slice(0, 5) }
        })
    }

请求方式二：

1
2
3
4
5
6
7
8
async asyncData ({ params }) {
           
        let { data } = await axios({
            method: 'get',
            url: '后台api接口'
        })
        return { posts: data.slice(0, 5) }
    }

问题：由于asyncData方法是在组件初始化 前被调用的，只能在首次重新加载的时候调用，如果遇到了分页，当页码改变的时候不能做服务端的调用。
解决方案：

nuxt的官方文档中提供了watchQuery属性可以监听参数字符串的更改。
如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。 为了提高性能，默认情况下禁用。
如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.

watchQuery的使用方法：
如果要全局使用watchQuery，那就在nuxt.config.js中全局配置

1
2
3
module.exports = {
    watchQuery: true
}
1
2
3
4
5
6
7
8
9
10
11
// 分页点击事件的方法
pageChange (page) {
    this.currentPage = page
    //在页码改变的时候要将参数以query的形式传到路径上
    this.$router.push({
        path:'/template',
        query:{
            page:page
        }
    })
}

middleware 中间件

所谓中间件，就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
中间件可以使您的自定义的函数在渲染页面之前运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 列如在middleware目录中创建baseurl.js文件来定义中间件函数
import axios from 'axios'
export default function ({ route, store, redirect }) {
    if (store.state) {
        alert('抱歉您没有token，请先登录')
        return redirect('/search')
    }
}
// 之后在nuxt-config.js中配置，之后就可以在每一个页面中使用
router: {
    middleware: 'baseurl'    // 是js文件名字
}
// 但是如果不想在每一个页面中使用，可以在需要的页面中指定
// 指定中间件函数
middleware: 'baseurl',



export default function({ store, route, redirect, $axios, error }) {
  // 根据后台返回的自定义错误码进行拦截
  $axios.onResponse(res => {
    const code = res.data.code
    if (code === 500) {
      return Promise.reject()
    }
    if (code === 404) {
      return error ({
        statusCode: 404
      })
    }
  })
  // 错误请求拦截跳转错误页面
  $axios.onError(() => {
    return error ({
      statusCode: 500
    })
  })
}

fetch 方法

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

一：

1
2
3
4
5
6
7
8
export default {
  fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
    .then((res) => {
      store.commit('setStars', res.data)
    })
  }
}

二：

1
2
3
4
5
6
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}