实践：使用vue-cli搭建一个Vue3-TS的uni-app工程化项目模板(中)

yarn add eslint --dev

{
  "scripts": {
    "eslint:init": "eslint --init"
  }
}

yarn eslint:init

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
};

dist

{
  "scripts": {
    "lint": "eslint --fix --ext .js,.jsx,.ts,.vue ./src",
  }
}

yarn lint

yarn add vuex@next --save

src/store
├── index.ts
└── modules
   └── test.ts

import { Module } from 'vuex';
interface State {
  count: number;
}
const store: Module<State, unknown> = {
  namespaced: true,
  state() {
    return {
      count: 0,
    };
  },
  getters: {
    isEven(state) {
      return state.count % 2 === 0;
    },
  },
  // 只能同步
  mutations: {
    increase(state, num = 1) {
      state.count += num;
    },
    decrease(state) {
      state.count -= 1;
    },
  },
  // 支持异步,可以考虑引入API
  actions: {
    increase(context, payload) {
      setTimeout(() => {
        context.commit('increase', payload);
      }, 1000);
    },
  },
};
export default store;

import { createStore } from 'vuex';
import test from './modules/test';
// Create a new store instance.
const store = createStore({
  modules: {
    m1: test,
  },
});
export default store;

import { createApp } from 'vue';
import App from './App.vue';
// 引入store
import store from './store/index';
const app = createApp(App);
// 在Vue上注册
app.use(store);
app.mount('#app');

<template>
  <view class="vuex-demo">
    <text>{{ count }} --- 偶数 {{ isEven ? 'yes' : 'no' }}</text>
    <view>
      <view><button @click="synIncrease">同步增加</button></view>
      <view><button @click="asyncIncrease">异步增加</button></view>
    </view>
  </view>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  setup() {
    const $store = useStore();
    // 获取state
    const count = computed(() => $store.state.m1.count);
    // 获取getters
    const isEven = computed(() => $store.getters['m1/isEven']);
    // 调用同步方法（mutations）
    const synIncrease = () => $store.commit('m1/increase');
    // 调用异步方法（actions）
    const asyncIncrease = () => $store.dispatch('m1/increase');
    return {
      count,
      isEven,
      synIncrease,
      asyncIncrease,
    };
  },
});
</script>
<style>
.vuex-demo {
  text-align: center;
}
</style>

yarn add axios-miniprogram@1.3.0

src/api
├── http.ts     # 封装的调用方法
├── index.ts    # 对外统一暴露各个业务模块的接口调用方法
└── modules
   └── user.ts    # user模块的接口调用方法

VUE_APP_AXIOS_BASEURL=http://localhost:3000

import axios from 'axios-miniprogram';
const http = axios;
// 请求base路径
http.defaults.baseURL = process.env.AXIOS_BASEURL;
http.defaults.headers = {
  'content-Type': 'application/json',
};
http.interceptors.request.use(
  (config) => {
    // 所有请求都携带token
    Object.assign(config.headers, {
      token: uni.getStorageSync('token'),
    });
    // 发送之前操作config
    return config;
  },
  (err) => {
    if (err.status !== 200) {
      // 处理错误
    }
    return Promise.reject(err);
  },
);
/**
 * 响应拦截
 */
http.interceptors.response.use(
  (response: any) => {
    // 对拿到的数据做一些额外操作操作 (如无权限,直接跳转首页)
    const { code, msg } = response.data;
    if (code !== 0) {
      if (msg) {
        uni.showToast({
          title: msg,
        });
      }
      // 走catch逻辑
      return Promise.reject(response.data);
    }
    // 返回前操作
    return response.data;
  },
  (err) => Promise.reject(err),
);
export default http;

import http from '../http';
function login(account: string, pwd: string) {
  return http.post('user/login', {
    account,
    pwd,
  });
}
export default {
  login,
};

export { default as userApi } from './modules/user';

<script lang="ts">
import { defineComponent } from 'vue';
import { userApi } from '@/api';
export default defineComponent({
  setup() {
    const handleHttp = () => {
      userApi.login('account', '123456')
        .then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        });
    };
    return {
      handleHttp,
    };
  },
});
</script>