VueCli3构建TS项目的方法步骤(4)

日期：2020-05-11 栏目：程序人生浏览：次

接口名称单独作为一个文件

/**
 * 后台接口名称
 */

const cmdName = {
 login: 'auth.agent.login'
}

export default cmdName

组合文件

/**
 * 组合请求http的请求
 */

import fetch from '@/utils/fetch'
import cmdName from './cmdName'
import { commonParams, url } from './commonParams'

export {
 fetch,
 cmdName,
 commonParams,
 url
}

导出的请求文件

import { fetch, cmdName, url, commonParams } from '@/api/common'

export function login (params: object) {
 return fetch({
  url: url(cmdName.login),
  method: 'post',
  data: commonParams({
   method: cmdName.login,
   params
  })
 })
}

使用接口方式

import * as API from '@/api/index'

API.login(params).then(res => {
})

store改造

vuex的作用：分离远程记录加载到本地存储（操作）和检索从store 中的getter

数据加载策略
细节/全局构造请求
导航响应
权限(配合router控制权限)

使用：

使用module形式
全局的一些操作，方法，放入store中，业务逻辑尽量少放，项目全局方法可以放入。例如：cookie, global cache

action(异步): api的操作，调用方式：this.$store.dispatch(functionName, data)

mutations(同步): dom相关操作，方法名一般使用常量，
调用方式: this.$store.commit(mutationsName, data)

this.$store.getters[XXX] => this.$store.getters[namespaced/XXX]
this.$store.dispatch(XXX, {}) => this.$store.dispatch(namespaced/XXX, {})
this.$store.commit(XXX, {}) => this.$store.commit(namespaced/XXX, {})

组件内的Vue

<template>
 <div>
  <div>用户名：<input type="text" v-model="username" /></div>
  <div>密码：<input type="password" v-model="passwd" /></div>

  <div>{{computedMsg}}</div>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Provide } from 'vue-property-decorator'

// 引入组件
@Component({
 components: {
  // input
 }
})
export default class Login extends Vue {
 // data
 @Provide() private username: string = ''
 @Provide() private passwd: string = ''

 // methods
 login (u: string, p: string) {
 }

 // computed
 get computedMsg () {
  return 'username: ' + this.username
 }

 // life cycle
 mounted () {
 }
}
</script>

转载注明出处：http://www.heiqu.com/137.html

VueCli3构建TS项目的方法步骤(4)

相关推荐