vue實戰（4）：postman測試數據、封裝ajax、使用vuex管理狀態

書到用時方恨少

這個階段涉及到了vuex,本來想着不慌，用起來，使用的過程中問題還真不少
本篇涉及到的內容：
---postman 測試數據
---封裝 ajax 請求函數
---封裝接口請求函數
---使用 vuex 管理狀態
---獲取首頁相關數據

0. 其它

vue實戰（1）：准備與資料整理
vue實戰（2）：初始化項目、搭建底部導航路由
vue實戰（3）：底部導航顯示、搭建各模塊靜態頁面、添加登錄頁頁面與路由
vue實戰（4）：postman測試數據、封裝ajax、使用vuex管理狀態
vue實戰（5）：總結一
vue實戰（6）：異步顯示數據、開發Star組件
vue實戰（7）：完整開發登錄頁面（一）
vue實戰（8）：完整開發登錄頁面（二）
vue實戰（9）：總結二
vue實戰（10）：開發店鋪詳情（一）

1. 安裝 MongoDB ，啟動后台

• 這個小練習項目是一個前后台分離的項目，后台應用負責處理前台應用提交的請求, 並給前台應用返回 json 數據，前台應用負責展現數據, 與用戶交互, 與后台應用交互。
  • 后台應用是用nodejs寫的，數據庫需要用到mongodb
  • 暫時不會nodejs和mongodb，不過沒關系，照着文檔先用起來，問題不大。
  • MongoDB 官方網站鏈接 和 教程與安裝鏈接

1.1 到MongoDB官網，下載適合的版本，安裝好
1.2 到后台項目文件夾下，cmd，用npm start啟動數據庫

2. 使用 postman 測試數據

• 數據庫打開以后，進一步去測試是否打開成功，是否能取到數據，這里就要用到接口測試工具 postman
• postman 可以獲取數據、可以檢測API文檔中的接口是否有問題
• 項目重點也不在這里，可以去 postman 官方網站鏈接 下載客戶端 和 很厲害的教程鏈接
• 查看API接口文檔

1.1 根據經緯度獲取位置詳情(例子)
    --請求URL：http://localhost:3000/position/:geohash
    --示例：http://localhost:3000/position/40.10038,116.36867
    --請求方式：GET
    --參數類型：param
    |參數		  |是否必選   |類型       |說明
	|geohash    |Y         |string    |經緯度
    --返回示例：
    {
      "code": 0,
      "data": {
        "address": "北京市昌平區337省道",
        "city": "北京市",
        "geohash": "40.10038,116.36867",
        "latitude": "40.10038",
        "longitude": "116.36867",
        "name": "昌平區北七家宏福科技園(337省道北)"
        }
     }
1.2 接口輸入postman中，查看結果
1.3 輸出與文檔相同，獲取數據成功

3. 封裝 ajax 請求函數

• 這里的異步交互使用的是axios,需要在項目中添加依賴 npm install --save axios
• 這里的封裝非常重要，雖然代碼不是很難懂，但是感覺是 知其然而不知其所以然 ，這也是貫徹了模塊化開發的思想，還是先用起來，會熟能生巧的。
  • 在 api 文件夾下創建 ajax.js ，引入 axios：import axios from 'axios'

import axios from 'axios'
/*
 ajax請求模塊
 封裝ajax請求函數
 */
export default function ajax (url = '', data = {}, type = 'GET') { // type 默認傳 get
  return new Promise(function (resolve, reject) { // 返回 new promise，后面會用到 async 和 await
    let promise
    if (type === 'GET') { // 判斷 get
      let dataStr = '' // 數據拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') { // 拼接成 url 地址
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 發送get請求
      promise = axios.get(url)
    } else {
      // 發送post請求
      promise = axios.post(url)
    }
    promise.then(response => {
      resolve(response.data)
    })
      .catch(error => {
        reject(error)
      })
  })
}

4. 封裝接口請求函數

• ajax 請求封裝完成之后，就是開始封裝各個接口請求函數
  • 在 api 文件夾下創建 index.js ，引入 ajax：import ajax from './ajax'
• 這個就好理解的多，根據項目需求的不同，需要的接口會非常的多，這樣做也是模塊化的體現，便於管理和維護

/* 包含多個模塊ajax函數
* 封裝接口請求函數(一部分例子)
* */
import ajax from './ajax'
const BASE_URL = '/api'  // 關於跨域

// 1、根據經緯度獲取位置詳情
// 此處直接這么寫，當請求時會出錯，因為后台代碼的端口是4000（或域名），與本地的請求端口不一致，自然無法實現跨域ajax請求，需要代理配置
// export const reqAddress = (geohash) => ajax(`/position/${geohash}`) 
export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`)
// 2、獲取食品分類列表
export const reqCategorys = () => ajax(`${BASE_URL}/index_category`)
// 3、根據經緯度獲取商鋪列表
export const reqShops = (latitude, longitude) => ajax(`${BASE_URL}/shops`, { latitude, longitude })

• 此處涉及到跨域的問題，需要進行一些配置
  • 因為本項目使用vue-cli3腳手架搭建，沒有現成的配置文件，現在需要在根目錄下創建 vue.config.js，查了一些資料，有點雜而且比較落后，其中一些參數已經被棄用了，配置了一個簡潔的，其它配置可以看 官方文檔

// vue.config.js
module.exports = {
  // 修改的配置
  publicPath: '/',
  devServer: {
    proxy: {
      '/api': { // 匹配所有以 '/api'開頭的請求路徑
        target: 'http://localhost:4000', // 代理目標的基礎路徑
        changeOrigin: true, // 支持跨域
        // ws: true,
        pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api'
          '^/api': ''
        }
      }
    }
  }
}

• 配置完成，測試一下是否能夠取到數據，可以在 App.vue 中引入 import { reqCategorys } from './api'，添加mounted方法

async mounted () {  // 例子
    const result = await reqCategorys()
    console.log(result) // 打印輸出
  }

5. 創建 vuex 整體結構，管理狀態

關於vuex的學習，起初不是怎么會用，看了官方文檔也沒怎么懂，看了幾篇博客知道了一些使用方法，視頻中對這部分的構建還是去年的形式，我照着現在的形式搭建了一下，因為只知其一不知其二，這也造成一些問題，好在目前遇到的問題都解決了，問題不大，后面還需要繼續深入學習。

• 首先是下載依賴，並且在main.js中配置好 import store from './store/store'，並且在store.js中引用import Vuex from 'vuex'和使用Vue.use(Vuex)
  • 如果在創建項目時已經配置好 vuex ，則無需在main.js中配置，已經是配置好的了

// vuex最核心的管理對象store
import Vue from 'vue'
import Vuex from 'vuex'

// 引用模塊
import msite from './modules/msite' 
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    msite // modules文件夾中的msite模塊
  },
  getters
})

• 模塊的編寫（例子）

// 內容比較多，這邊可以把相似或者功能相同的組成一個模塊，更方便維護
// 模塊文件在store.js中引用

import { // 引用封裝好的接口
  reqAddress,
  reqCategorys,
  reqShops
} from '../../api/index'

// 基礎數據狀態,現在在任何文件都可以引用，引用時 this.$store.xxx 即可
const state = {
  latitude: 40.10038, // 緯度
  longitude: 116.36867, // 經度
  address: {}, // 地址信息對象
  categorys: [], // 分類數組
  shops: [] // 商家數組
}

// 直接更改state的多個方法的對象，現在在任何文件都可以引用，引用時 this.$store.commit（'xxxx'）即可
const mutations = { 
  RECEIVE_ADDRESS: (state, { address }) => { // 接受地址
    state.address = address
  },
  RECEIVE_REQCATEGORYS: (state, { categorys }) => { // 接受食品分類數組
    state.categorys = categorys
  },
  RECEIVE_REQSHOPS: (state, { shops }) => { // 接受商家數組
    state.shops = shops
  }
}

// 與后台交互的數據，現在在任何文件都可以引用，引用時 this.$store.dispatch（'xxxx'）即可
const actions = {
  // 異步獲取地址
  async getAddress ({ commit, state }) {
    // 發送ajax異步請求
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    // 提交一個mutations
    if (result.code === 0) {
      commit('RECEIVE_ADDRESS', { address: result.data })
    }
  },
  // 異步獲取分類列表
  async getCategorys ({ commit }) {
    const result = await reqCategorys()
    if (result.code === 0) {
      commit('RECEIVE_REQCATEGORYS', { categorys: result.data })
    }
  },
  // 異步獲取商家列表
  async getShops ({ commit, state }) {
    const { latitude, longitude } = state
    const result = await reqShops({ latitude, longitude })
    if (result.code === 0) {
      commit('RECEIVE_REQSHOPS', { shops: result.data })
    }
  }
}

export default { // 把方法暴露出去
  namespaced: true,
  state,
  mutations,
  actions
}

• vuex 構建好，下面是使用測試，在需要的地方使用
  • 這里還涉及到了 vuex 的輔助函數，mapState、mapMutations、mapAction，vuex最簡單、最詳細的入門文檔，這篇文章寫的非常好，具體的就不展開了，直接使用起來，問題不大。
  • 首先在App.vue中引入import { mapActions } from 'vuex'，使用需要的方法

<script>
import FooterGuide from './components/FooterGuide/FooterGuide'
import { mapActions } from 'vuex'
export default {
  name: 'App',
  mounted () {
    // this.$store.dispatch('msite/getAddress')
    this.getAddress() // 這邊調用的方法，在瀏覽器的插件中會有一個非常清楚的展示
  },
  methods: {
    ...mapActions('msite', ['getAddress'])
  },
  components: {
    FooterGuide
  }
}
</script>

• 現在我們需要其中的 name 屬性數據，在Msite.vue中引用import { mapState } from 'vuex',添加 computed 方法：computed: { ...mapState('msite', ['address'])}，然后就可以愉快的使用了

<!--首頁頭部-->
<!--此處title使用強制綁定，取出 address 中的 name-->
    <HeaderTop :title = "address.name"> 
      <router-link class="header_search" slot="left" to="">
        <i class="iconfont iconfangdajing"></i>
      </router-link>
      <router-link class="header_login" slot="right" to="">
        <span class="header_login_text">登錄|注冊</span>
      </router-link>
    </HeaderTop>

• 遇到一個 大坑
  vuex 使用 ...mapState 獲取到 undefined，這是我遇到的一個坑，這篇文章正好解決了我的問題。

6. 結束

感覺這個部分是最難的部分了，還是不熟悉的原因，下面都是邏輯處理方面的內容了