VueプロジェクトにおけるApiの組織とデータ処理に戻る操作

プロジェクト内の全てのAppの構成は一つのファイルに置いてあり、検索と修正が容易であり、Appのバージョンは構成ファイル（config.js）から読み、採用されている。 aprefix+urlの形で構成されています。
プロファイルでは、Appの構成が採用されています。 Http要求方式urlの方式は、デフォルトでは GETは書かなくてもいいです。要求方式は大文字で統一されています。ダイナミックパラメータは採用されています。 : プレースホルダの形式。

// services/api.js
export default {
 login: 'POST /login',
 logout: '/logout',
 queryUser: '/user/:id'
}

そして一つの方法が必要です。解析上のApp配置

// services/index.js
import request from '../utils/request'
import api from './api'
const gen = params => {
 let url = params
 let method = 'GET'
 const paramsArr = params.split(' ')
 if (paramsArr.length === 2) {
  method = paramsArr[0]
  url = paramsArr[1]
 }
 return data => {
  return request({
   url,
   data,
   method
  })
 }
}
const apiFunc = {}
for (const key in api) {
 apiFunc[key] = gen(api[key])
}
export default apiFunc

上のコードの requestはパッケージです axios後に露出する方法は、コードは以下の通りです。

// utils/request.js
import axios from 'axios'
import store from '../store'
import { apiPrefix } from './config'
import { Message, MessageBox } from 'element-ui'
let cancel
const CancelToken = axios.CancelToken
const service = axios.create({
 baseURL: apiPrefix,
 timeout: 3000,
 cancelToken: new CancelToken(c => cancel = c)
})
service.interceptors.response.use(
 response => {
  const resType = response.config.responseType
  const res = response.data
  //      
  if (resType && resType !== 'json') {
   const filename = response.headers['content-disposition'].split('filename=')[1]
   return {
    filename,
    blob: res
   }
  }
  if (res.code !== 200) {
   //     
   if (res.code === 401) {
    let timer = null
    //       
    cancel(res.msg)
    //   store localStorage  
    store.commit('user/RESET_LOGIN_STATE', false)
    MessageBox.confirm('     ，     ', '  ', {
     confirmButtonText: '  ',
     showClose: false,
     showCancelButton: false,
     type: 'warning'
    }).then(() => {
     clearTimeout(timer)
     reload()
    })
    timer = setTimeout(reload, 1000)
   }
   const errMsg = res.msg || '       '
   popupMsg(errMsg)
   return Promise.reject(errMsg)
  }
  return res
 },
 error => {
  //   
  if (error.message.includes('timeout')) {
   const errMsg = '      ，      '
   popupMsg(errMsg)
   cancel(errMsg)
  }
 }
)
function reload() {
 window.location.href = `${window.location.origin}/#/login`
 window.location.reload()
}
function popupMsg(msg, sec = 5000) {
 Message({
  message: msg,
  type: 'error',
  duration: sec
 })
}
export default service

パッケージ処理中です。 ネットワーク要求のタイムアウト、 テーブルデータをダウンロードする時、バックエンドが直接バイナリファイルに戻る場合、 ログインが失効したら、後続インターフェース要求をキャンセルします。
バックグラウンド管理システムプロジェクトを開発する時、基本的にはVuexを使います。実際の開発過程では通常機能によって分けられます。 moduleは x.vueファイルの中を直接通ります。 MapActiosは副作用のある方法を注入する。

// store/common.js
import service from '../services'
const actions = {
 async login(data) {
  const res = await service.login(data)
  return Promise.resolve(res)
 }
}
export default {
 namespaced: true,
 state: {},
 getters: {},
 mutations: {},
 actions
}

実は上の方にあります appiFunメソッドでは、リターン結果を直接呼び出すことができますが、なぜここでは多くのことができますか？ある時、一つのインターフェースのパラメータは加工処理が必要で、各ページで明らかなコードの冗長性を処理して、修正が不便です。同時に同じデータを取得することもあります。しかし、異なるページの後端からくれるのは異なるインターフェースです。ここでパラメータによってどのインターフェースが必要かを明確にします。
パッケージには actionでは、データを返す必要がない場合があります。ページ全体のデータ状態をstateに置くことができますので、データを受け取ったらそのまま通過します。 comit一つ mutationを修正します state、ページの中で直接すべての数を通します。 mapStateまたは直接 this.$store.state.xxが訪問します。stateの中の状態をバインドしたいなら v-modelは、 computedで定義されています getと setを実装します。例えば、

export default {
 computed: {
  dateType: {
   get() {
    return this.$store.state.device.dateType
   },
   set(val) {
    //     ，     、 、      `el-datep-icker`   
   }
  }
 }
}

プロジェクトでは、ページのすべての状態をvuexにセットすることは推奨されません。一部のグローバル状態と一部のコンポーネントの間に連動効果がある場合を除きます。現在のルートで他のルートに切り替えるため、vuexでは stateのデータはリセットされていません。再カットしても元のデータに変化がないことが分かります。そして一旦定義すると stateの場合は入れ子が多すぎてリセットが大変です。
もう一つの問題があります。 echartsの場合、いくつかのフィルタによって、グラフを動的に変更すると、 mapStateと gettersでは最新のデータが入手できません。手で長い文字を書かなければなりません。  this.$store.state.moduleA.moduleB.xxx.state 、もちろん私達もvuexの提供する便利なマッピング方法を使うことができます。  const { mapState } = createNamespacedHelper('some/nested/module')ですが、同じページを参照すると問題があります。 moduleがたくさんあります。別名を複数取ることに関連しています。
プロジェクトでの使い方は以下の通りです。

import { mapActions } from 'vuex'
import apiFunc from '../services'

export default {
 methods: {
  ...mapActions('common', [
   'login'
  ]),
  async onLogin() {
   const params = {}
   const res = await apiFunc.login(params)
  }
 }
}

注意して使っています async/awaitの場合、外側の層のエラーがキャプチャされていない場合は、層を追加したほうがいいです。 try…catch…。