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

以上便是我的项目实践笔记总结，有不对之处可留言指出，谢谢。

posted @ 2020-11-20 11:36 晚睡的猫阅读(1387) 评论(0) 编辑收藏举报

刷新页面返回顶部

Vue+typescript+vuex项目实践学习笔记

公告