• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript安装与使用发布时间:2022-07-18
下一篇:
使用npx创建react+typescript项目发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap