Vue+typescript+vuex項目實踐學習筆記

vue+ts+vuex+vue-router項目實踐筆記：

　　使用vue cli3.0腳手架創建包含 typescript 的vue項目，然后需要安裝下面這兩個依賴文件：

　　npm install  vue-template-compiler
   
   npm install vuex-class

ts與js項目的區別在於：變量需要指定類型，方法需要指定返回類型，狀態管理庫store里面的寫法不一樣，組件里面的裝飾器不同以及觸發state狀態改變的方式不同：

1. 變量需要指定類型：（以login.vue組件為例）

 // vue下面的data屬性
  public form: InterForm = {
    password:"",
    username:"",
  } ; 
  public showPassword: boolean = false;  

 

2. 方法需要指定返回類型：（以login.vue組件為例）

　　

//mounted
  public mounted(): void {
    
  };

 

3.狀態管理庫store里面的寫法不同：

　　

　　1》需要在store文件夾里面定義一個文件：mutation-types.ts，內容如下：

// login頁面
export const LOGIN_FORM = "LOGIN_FORM";
export const LOGIN_SHOW_PASSWORD = "LOGIN_SHOW_PASSWORD";
// export const LOGIN_RULES = "LOGIN_RULES";

// user頁面
export const USER_TIMER = "USER_TIMER";
export const USER_AREAS_LABEL = "USER_AREAS_LABEL";
export const USER_REGION_OPTIONS = "USER_REGION_OPTIONS";
export const USER_SECTION_OPTIONS = "USER_SECTION_OPTIONS";
export const USER_AREAS_IDS = "USER_AREAS_IDS";
export const USER_AREAS_ID = "USER_AREAS_ID";
export const USER_SEARCH_PARAMS = "USER_SEARCH_PARAMS";
export const USER_FORMRULES = "USER_FORMRULES";
export const USER_LOADING = "USER_LOADING";
export const USER_PAGINATION = "USER_PAGINATION";
export const USER_TABLE_DATA = "USER_TABLE_DATA";
export const USER_USER_DATA = "USER_USER_DATA";
export const USER_USER_DATA_COPY = "USER_USER_DATA_COPY";
export const USER_MODAL_EDIT = "USER_MODAL_EDIT";
export const USER_TABLECOLUMNS = "USER_TABLECOLUMNS";

2》在store文件夾里面新建一個文件夾modules用於存放項目中各個模塊的state狀態存儲文件，然后再modules模塊里面創建一個login.ts文件，用於存儲登錄頁面的狀態,代碼如下：

import {
  LOGIN_FORM,
  LOGIN_SHOW_PASSWORD,
} from "../mutation-types";

import { Commit } from "vuex";

/** 格式 約束 */
export interface InterForm {  // form表單接口
  password: string;
  username: string;
}
export interface InterState {  // store 接口
  form: InterForm;
  showPassword: boolean;
}
const state: InterState = {
  showPassword: false,  
  form: {  // 分頁
    password:"",
    username: ""
  }
};
// getters
const getters = {
  [LOGIN_FORM]: (orgState: InterState) => orgState.form,
  [LOGIN_SHOW_PASSWORD]: (orgState: InterState) => orgState.showPassword,
};
// mutations
const mutations = {
  [LOGIN_FORM](orgState: InterState, value: InterForm): void {
    orgState.form = value;
  },
  [LOGIN_SHOW_PASSWORD](orgState: InterState, value: boolean): void {
    orgState.showPassword = value;
  },
};
// actions
const actions = {
  [LOGIN_FORM](context: { commit: Commit, state: InterState }, value: string): void {
    context.commit(LOGIN_FORM, value);
  },
  [LOGIN_SHOW_PASSWORD](context: { commit: Commit, state: InterState }, value: number): void {
    context.commit(LOGIN_SHOW_PASSWORD, value);
  },
};
const Index = {
  state,
  getters,
  mutations,
  actions,
};
export default Index;

 

4. 組件里面的裝飾器不同以及觸發state狀態改變的方式不同：以login.vue組件為例：

<script lang='ts'>
  import { loginApi } from '@/service/index.ts';
  import { Vue, Component, Watch } from "vue-property-decorator";
  import { Getter, Action } from "vuex-class";
  import {
  LOGIN_FORM,
  LOGIN_SHOW_PASSWORD,
  GLOBAL_USERINFO,
  } from "@/store/mutation-types";
  import { InterForm } from '@/store/modules/login';
  import { InterUserInfo } from '@/store/state';

  @Component
  export default class Login extends Vue {
    // data
    public form: InterForm = {
      password:"",
      username:"",
    } ; 
    public showPassword: boolean = false;  

    // action
    @Action(LOGIN_FORM) public formAct: (val: InterForm) => void;
    @Action(LOGIN_SHOW_PASSWORD) public showPasswordAct: (val: boolean) => void;
    @Action(GLOBAL_USERINFO) public userInfoAct: (val: InterUserInfo) => void;

  //mounted
    public mounted(): void {
      
    };
    
  //methods

  //登錄校驗
  public validLogin():void {
    this.$refs.form.validate((valid:boolean) => {
      if (valid) {
        this.submitLogin()
      }
    });
  };
  public submitLogin():void {
      // 調接口
      loginApi.login({
        username: this.form.username,
        password: this.form.password,
      }).then((res) => {
        this.userInfoAct(res.data.data);
        localStorage.setItem('id', res.data.data.id);
        localStorage.setItem('user_info', res.data.data);
        this.$message({
          message: '登錄成功',
          type: 'success'
       });
       this.$router.push({path:'/user/user-mgr'})
      });
  }
}
</script>

 

5. 補充說明：

變量前面的修飾符（public）默認可以不用寫

TypeScript 可以使用三種訪問修飾符（Access Modifiers），分別是 public、private 和 protected。

• public 修飾的屬性或方法是公有的，可以在任何地方被訪問到，默認所有的屬性和方法都是 public 的
• private 修飾的屬性或方法是私有的，不能在聲明它的類的外部訪問
• protected 修飾的屬性或方法是受保護的，它和 private 類似，區別是它在子類中也是允許被訪問的

vue-property-decorator 里面有很多裝飾器，它完全依賴於：vue-class-component，當使用vue要使用ts的時候，需要用到這些裝飾器；

具體用法可以參照：https://www.npmjs.com/package/vue-property-decorator  或者參照：https://www.cnblogs.com/cczlovexw/p/11444984.html

vuex-class 的作用主要是為了在ts模式下使用vuex狀態管理庫的getters/actions/mutations

 

以上便是我的項目實踐筆記總結，有不對之處可留言指出，謝謝。