一丶设置代码提交之前自动格式化
1. 安装lint-staged
npm install lint-staged --dev
npm install yorkie --dev
2. 在pakege.json里设置代码预检查
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint" // 这里修改一下
},
"gitHooks": {
"prettier --config .prettierrc --write",
"npm run lint",
"git add"
},
"lint-staged": {
"src/**/*.{ts,vue}": [
"npm run lint"
]
},
这样就可以实现commit之前自动审查代码
二丶在ts+vue项目里使用Vuex
- 先安装
vuex-class
$ npm install --save vuex-class
# or
$ yarn add vuex-class
- 在store目录下创建
state.ts
,actions.ts
,mutations.ts
eg - 在原有的
index.ts
下引入创建的三个文件
import Vue from 'vue';
import Vuex from 'vuex';
import state from '@/store/state.ts';
import actions from '@/store/actions';
import mutations from '@/store/mutations';
Vue.use(Vuex);
export default new Vuex.Store({
state: state,
mutations: mutations,
actions: actions,
modules: {}
});
- 以存储用户的
userInfo
为例子, 将userInfo存入vuex
4.1 实现actions.ts
export default {
/**
* 保存用户信息
* @param context ctx
* @param val 要存储的值
*/
saveUserInfo(context: { commit: (arg0: string, arg1: any) => void }, val: any) {
context.commit('saveUserInfo', val);
}
};
4.2 实现mutations.ts
export default {
/**
* 保存用户信息
* @param state 当前的状态
* @param userInfo 要存储的值
*/
saveUserInfo(state: { userInfo: any }, userInfo: any) {
state.userInfo = userInfo;
localStorage.userInfo = userInfo;
}
};
4.3 实现state.ts
let userInfo = '';
try {
const user = localStorage.getItem('userInfo');
if (user != null || user != undefined) {
userInfo = user;
}
} catch (e) {}
export default {
userInfo
};
4.4 业务逻辑中的简单实现
import { Component, Vue } from 'vue-property-decorator';
import { Action, State } from 'vuex-class';
@Component({
components: {}
})
export default class Member extends Vue {
// public created(): void {}
@Action('saveUserInfo') private saveUserInfo: any;
@State userInfo!: any;
public mounted(): void {
// 存储userInfo
this.saveUserInfo('hahhahah222');
// 获取userInfo
console.log('userInfo::', this.userInfo);
}
}