In the process of making requirements, we often encounter some complex situations, such as the need to transfer values between components and store common data. At this time, we need to configure VUEX to solve our pain points.

Vuex

Version v4. X: next.vuex.vuejs.org/zh/index.ht…

Create a new store folder in your project.

|-- store | |-- getters.ts | |-- index.ts | |-- types.ts | |-- modules | |-- user | |-- index.ts | |-- mutation-types.ts  | |-- state-types.tsCopy the code

Vuex adds the TS type definition. The following is an example:

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 }Copy the code

mutation-types.ts

export enum Mutation {
  SET_TOKEN = 'SET_TOKEN',
  SET_USER_INFO = 'SET_USER_INFO'
}
Copy the code

types.ts

In the command, state-types.ts is the type of the median state value in the directory

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

export interface RootState {
  user: UserState
}
Copy the code

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}) export function useStore() {return baseUseStore(key)}Copy the code

main.ts

Inject store into the entry file

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

createApp(App)
  .use(store, key)
  .mount('#app')
Copy the code

With TS support, you can retrieve defined values by prompting when using store in a project, providing convenience for development.

commitlint

Document address: commitlint.js.org/

In the development process, git commit is inevitable, and a unified commit information specification is also necessary. Vue CLI provides git hooks to add custom operations during commit to limit commit.

First, install the CommitLint plug-in

yarn add @commitlint/cli -D
Copy the code

Add the gitHooks field to package.json as follows:

"GitHooks ": {"pre-commit":" lint-passage ", // Format the code "commit-msg" before committing: "Commitlint-e GIT_PARAMS" // Normalize submitted MSGS}, "lint-staged": {"*.{js, JSX,vue}":" ESlint --fix"}Copy the code

You can also configure the commit rules by creating a commitlint.config.js file in the project directory

module.exports = { rules: { 'type-case': [2, 'always', 'lower-case'], 'type-empty': [2, 'never'], 'type-enum': [2, 'always', ['build', // modify project build system 'ci', // modify project continue integration process 'docs', // document update 'feat', // add functionality 'fix', // bug fix' perf', // Performance optimizations 'refactor', // refactoring code (no new features, no bug fixes) 'style', // code changes that do not affect the program logic (whitespace character changes, 'revert', // rollback of an earlier commit 'test', // Tests 'chore' // other types that do not belong to the above type]]}}Copy the code

Vue CLI Configures CSS preprocessing

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

Add configuration to vue.config.js to directly introduce global CSS variables to use in the page, using SCSS as an example:

css: { loaderOptions: { sass: { prependData: `@import "~@/styles/variables.scss"; `}}}Copy the code

There are some other configurations, such as using SVG-Sprite-loader, dynamically importing SVG images, defining global ICON components, etc., continue to summarize the practice in development…