Vue3及ts项目搭建过程中遇到的问题（二）

在做需求的过程中，经常会遇到一些复杂的情形，如需要组件间的传值、存储公共数据，这时候需要配置vuex来解决我们的痛点。

Vuex

版本v4.x: next.vuex.vuejs.org/zh/index.ht…

在项目中新建store文件夹，目录如下：

|-- store
    |   |-- getters.ts
    |   |-- index.ts
    |   |-- types.ts
    |   |-- modules
    |       |-- user
    |           |-- index.ts
    |           |-- mutation-types.ts
    |           |-- state-types.ts
复制代码

vuex添加ts类型定义，以下为配置示例：

user/index.ts

import { MutationTree, ActionTree } from 'vuex'

import { State } from './state-types'
import { Mutation } from './mutation-types'
import { RootState } from '../../types'

export const state: State = {
  token: '',
  userInfo: {}
}

const mutations: MutationTree<State> = {
  [Mutation.SET_TOKEN](state, token) {
    state.token = token
  },
  [Mutation.SET_USER_INFO](state, userInfo) {
    state.userInfo = userInfo
  }
}

const actions: ActionTree<State, RootState> = {
  getUserInfo({ commit }) {
    return new Promise<void>(resolve => {
      commit(Mutation.SET_USER_INFO)
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
复制代码

mutation-types.ts

export enum Mutation {
  SET_TOKEN = 'SET_TOKEN',
  SET_USER_INFO = 'SET_USER_INFO'
}
复制代码

types.ts

其中state-types.ts为该目录下state中值的类型

import { State as UserState } from './modules/user/state-types'

export interface RootState {
  user: UserState
}
复制代码

index.ts

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { RootState } from './types'
import getters from './getters'
import user from './modules/user'

export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  modules: { user },
  getters
})

// 定义useStore组合式函数
export function useStore() {
  return baseUseStore(key)
}
复制代码

main.ts

在入口文件中注入store

import { store, key } from './store'

createApp(App)
  .use(store, key)
  .mount('#app')
复制代码

通过ts支持，在项目中使用store时通过提示能获取到定义的值，为开发提供方便。

commitlint

文档地址：commitlint.js.org/

在开发过程中，git提交是不可避免的，统一的提交信息规范也是必须的，vue cli中提供了git钩子，在提交的某个过程中添加自定义操作，来限制提交。

首先，安装commitlint插件

yarn add @commitlint/cli -D
复制代码

在 package.json 中添加 gitHooks 字段来配置，如下：

"gitHooks": {
    "pre-commit": "lint-staged", // 在提交前，先格式化代码
    "commit-msg": "commitlint -E GIT_PARAMS" // 对提交的msg进行统一规范
},
"lint-staged": {
    "*.{js,jsx,vue}": "eslint --fix"
}
复制代码

还可以在项目目录下创建commitlint.config.js文件，配置提交规则

module.exports = {
  rules: {
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build', // 修改项目构建系统
        'ci', // 修改项目继续集成流程
        'docs', // 文档更新
        'feat', // 新增功能
        'fix', // bug 修复
        'perf', // 性能优化
        'refactor', // 重构代码(既没有新增功能，也没有修复 bug)
        'style', // 不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
        'revert', // 回滚某个更早之前的提交
        'test', // 测试
        'chore' //不属于以上类型的其他类型
      ]
    ]
  }
}
复制代码

vue cli 配置css预处理

cli.vuejs.org/zh/guide/cs…

在vue.config.js中添加配置，直接引入全局css变量，在页面中使用，以scss为例子：

css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  }
复制代码

还有一些其他的配置，比如通过svg-sprite-loader，动态引入svg图片，定义全局的icon组件等，在开发中继续总结实践。。。