Nuxt.js实战技巧-优快云博客

使用nuxt已经一段时间了，在此巩固一下使用时所遇到的一些解决思路和方法。若有什么错误的或者其他解决方式欢迎各位大佬在留言区给我留言交流。Nuxt.js是一个基于Vue的通用应用框架，在这个框架集成了vue全家桶，如果是ssr项目的话首推这个框架。

1. Nuxt.js加载其他静态资源

在Nuxt框架中引用外部静态资源分为两种：

1.1 引入本地静态资源

安装好Nuxt框架后会生成系统默认的一些文件夹和文件，官网上面有对项目目录结构的详细介绍。

把我们需要的静态资源复制到静态文件目录static中，该文件是用于存放静态文件的不会被Nuxt.js调用webpack进行构建编译处理。

服务启动后该目录下的文件会映射到对应的根路径/下。该目录名为Nuxt.js保留的，不可更改。

举个例子: /static/robots.txt 映射至 /robots.txt

引用img如下所示直接在代码文件中引用，注意结构层级。

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png"/>
复制代码

1.2 引入本地css文件

1.把.css文件复制到static文件中；

2.然后修改nuxt.config.js文件中配置属性；

关于css还有一个问题就是有些css文件直接在源代码中，而不是直接css链接引用，因此对SEO不是很友好。这是因为Nuxt.js 自己本身已经集成了extract-text-webpack-plugin这个插件，只是extractCSS默认为false。

所以只需在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }这句话就可以了。Tips：只有在生产环境生效，注意css样式覆盖。

1.3 引入本地js文件

1.把.js文件复制到static文件中；

2.然后修改nuxt.config.js文件中配置属性；

Tips：其中ssr：false是为了不让js文件再服务器中编译；

1.4 引入外部js和css文件

在官方文档中就有如何引入外部js和css的说明示例，具体代码如下；

module.exports = {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}
复制代码

1.5 单独某个页面引入外部资源

可在 pages 目录内的 .vue 文件中引用外部资源，如下所示：

<template>
  <h1>使用 jQuery 和 Roboto 字体的关于页</h1>
</template>

<script>
export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}
</script>
复制代码

2. Nuxt.js中状态树

Nuxt.js集成了vuex状态管理，Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

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

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

普通方式： store/index.js 返回一个 Vuex.Store 实例
模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块（当然，index 是根模块）

2.1 store引入方式---模块方式

Nuxt会直接解析store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块。

在模块中不需要返回 Vuex.Store 实例，而应该直接将 state、mutations 和 actions 暴露出来。

2.2 在组件页面中获取数据

1.直接赋值

roomPriceStart:this.$store.state.hotel.roomPriceStart 复制代码

2.使用辅助函数获取多个状态

Tips:计算属性能自动获取状态树中改变的值。

//引入mapState
import { mapState } from 'vuex'

//在计算属性中使用mapState
computed: mapState({    // 映射 this.count 为 store.state.count    roomPriceStart: state => state.hotel.roomPriceStart, }),复制代码

2.3 修改状态树中的状态

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

Tips：mutations只能同步调用

在mutations中定义好修改状态的函数后需要在页面组件中调用才可以更改数据：

//在页面组件methods方法中调用更改数据的方法
methods:{
 // 清除位置品牌酒店名称  clickClean(){     const data ={};     this.$store.commit('hotel/setPickCity',data);     this.choose_type = false;   },}复制代码

若需要调用很多方法可以直接使用mapMutations进行调用

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}复制代码

2.4 异步更改状态

Vuex提供了一个解决方法action，action是一个类似于mutation的方法；

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

但是定义好方法后需要我们使用dispatch来触发：

也可以使用mapActions来触发：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}复制代码