ts + vue 设置代码提交之前自动格式化以及使用Vuex

一丶设置代码提交之前自动格式化

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

1. 先安装vuex-class

$ npm install --save vuex-class
# or
$ yarn add vuex-class

2. 在store目录下创建state.ts, actions.ts, mutations.ts
   
   eg
3. 在原有的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: {}
});

4. 以存储用户的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);
  }
}