Nuxt入門總結

我的糖呢發表於2018-09-18
UX

使用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檔案中配置屬性；

Nuxt入門總結

關於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檔案再伺服器中編譯；

Nuxt入門總結

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 目錄，如果該目錄存在，它將做以下的事情：

  1. 引用 vuex 模組
  2. 將 vuex 模組 加到 vendors 構建配置中去
  3. 設定 Vue 根例項的 store 配置項

Nuxt.js 支援兩種使用 store 的方式，你可以擇一使用：

  • 普通方式： store/index.js 返回一個 Vuex.Store 例項
  • 模組方式： store 目錄下的每個 .js 檔案會被轉換成為狀態樹指定命名的子模組 （當然，index 是根模組）

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

Nuxt會直接解析store 目錄下的每個 .js 檔案會被轉換成為狀態樹指定命名的子模組。

Nuxt入門總結

在模組中不需要返回 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只能同步呼叫

Nuxt入門總結

在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 可以包含任意非同步操作。

Nuxt入門總結

但是定義好方法後需要我們使用dispatch來觸發：

Nuxt入門總結

也可以使用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')`
    })
  }
}複製程式碼

具體其他方法可以檢視官方文件。


相關文章