vuex简介及Typescrip基本语法

原创于 2025-12-05 09:54:40 发布 · 700 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

前端专栏收录该内容

3 篇文章

订阅专栏

vuex 介绍

vuex 是专为 Vue.js 应用开发的状态管理库
能在多个组件间共享数据，且数据是响应式的（数据变更可及时渲染到模板）
采用集中式存储管理所有组件的状态

核心概念

state：状态对象，集中定义各个组件共享的数据
mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数
actions：类似于 mutation，可以包含异步操作，通过调用 mutation 来改变共享数据

安装 vuex

npm install vuex@next --save

vuex 使用方式

定义和展示共享数据

store中的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  //共享数据
  state: {
    name:'未登录游客'
  },
  getters: {
  },
  //修改共享数据只能通过mutation实现，必须是同步操作
  mutations: {…
  },
  //通过actions可以调用到mutations，在actions中可以进行异步操作
  actions: {…
  },
  modules: {
  }
})

在app.vue中调用

<template>
<div id="app">
欢迎你，{{ $store.state.name }}
<nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

在 mutations 中定义函数，修改共享数据

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  //共享数据
  state: {
    name:'未登录游客'
  },
  getters: {
  },
  //修改共享数据只能通过mutation实现，必须是同步操作
  mutations: {
    setName(state,name){
      state.name = name
    }
  },
  //通过actions可以调用到mutations，在actions中可以进行异步操作
  actions: {…
  },
  modules: {
  }
})

<template>
<div class="about">
欢迎你，{{ $store.state.name }}
<input type="button" value="通过mutation修改共享数据" @click="handleUpdate"/>
<h1>This is an about page</h1>
</div>
</template>

<script>
//import axios from 'axios'
export default {
methods: {
  handleUpdate() {
    //mutations中定义的函数不能直接调用，必须通过这种方式间接调用
    //setName为mutations中定义的函数名称，lisi为传递的参数
    this.$store.commit('setName','lisi')
  }
}
}
</script>

使用代理解决跨域问题

先定义

export default new Vuex.Store({
  //共享数据
  state: {
    name:'未登录游客'
  },
  getters: {
  },
  //修改共享数据只能通过mutation实现，必须是同步操作
  mutations: {
    setName(state,name){
      state.name = name
    }
  },
  //通过actions可以调用到mutations，在actions中可以进行异步操作
  actions: {
    setNameByAxios(context){
      axios({
        url: '/api/employee/login',
        method: 'post',
        data: {
          username: 'admin',
          password: '123456'
        }
      }).then(res => {
        if(res.data.code == 1){
          //调用mutations中定义的setName函数
          context.commit('setName',res.data.data.name)
        }
      })
    }
  },
  modules: {
  }
})

vue.config.js 配置

代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7777,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

TypeScrip

TypeScript（简称：TS）是微软推出的开源语言
TypeScript 是 JavaScript 的超集（JS 有的 TS 都有）
TypeScript = Type + JavaScript（在 JS 基础上增加了类型支持）
TypeScript 文件扩展名为 ts
TypeScript 可编译成标准的 JavaScript，并且在编译时进行类型检查

代码示例：

typescript(类型不匹配会报错)

// TypeScript 代码：有明确的类型，即：number（数值类型）
let age1: number = 18

javascrip

// JavaScript 代码：无明确的类型
let age2 = 18

编译流程

code.ts（TypeScript代码） → TSC → code.js（JavaScript代码） → 运行于浏览器/Node.js

安装 typescript

npm install -g typescript

查看 TS 版本

tsc -v

TS 为什么要增加类型支持？

✔ TS 属于静态类型编程语言，JS 属于动态类型编程语言
✔ 静态类型在编译期做类型检查，动态类型在执行期做类型检查
✔ 对于 JS 来说，需要等到代码执行的时候才能发现错误（晚）
✔ 对于 TS 来说，在代码编译的时候就可以发现错误（早）
✔ 配合 VSCode 开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 的时间

提取

如何理解 TypeScript？

✔ 是 JavaScript 的超集，兼容 JavaScript
✔ 扩展了 JavaScript 的语法，文件扩展名为 ts
✔ 可以编译成标准的 JavaScript，并且可以在编译时进行类型检查
✔ 全局安装 npm install -g typescript
✔ 使用 tsc 命令将 ts 文件编译成 js 文件

TypeScript 常用类型

类型	例	备注
字符串类型	string
数字类型	number
布尔类型	boolean
数组类型	number [],string [], boolean [] 依此类推
任意类型	any	相当于又回到了没有类型的时代
复杂类型	type 与 interface
函数类型	() => void	对函数的参数和返回值进行说明
字面量类型	“a”\|“b”\|“c”	限制变量或参数的取值
class 类	class Animal

类型标注的位置

标注变量
标注参数
标注返回值

代码示例：

typescript

//标注变量，指定变量 msg 的类型为string
let msg:string = 'hello ts !'

//标注参数和返回值，指定 m2 函数的参数类型 为string，并且返回值也为 string
const m2 = (name:string):string => {
    return name.toLowerCase() + msg
}

字面量类型

//字面量类型，指定参数 alignment 的取值只能是 left、right、center
function printText(s: string, alignment: "left" | "right" | "center") {
    console.log(s, alignment)
}

printText('hello', 'left')
printText('hello', 'aaa') // 错误: 取值只能是 left | right | center

注意

字面量类型用于限定数据的取值范围

interface 类型

//定义一个接口，名字为Cat
interface Cat {
    name: string,
    age: number
}

//定义变量为Cat类型
const c1: Cat = { name: '小白', age: 1 }
//const c2: Cat = { name: '小花' } // 错误: 缺少 age 属性
//const c3: Cat = { name: '小黑', age: 1, sex: '公' } // 错误: 多出 sex 属性

console.log(c1)

typescript

//定义一个接口，名字为Cat
interface Cat {
    name: string,
    age?: number //当前属性为可选
}

//定义变量为Cat类型
const c1: Cat = { name: '小白', age: 1 }
const c2: Cat = { name: '小花' } // 正确: age 属性 为可选
//const c3: Cat = { name: '小黑', age: 1, sex: '公' } // 错误: 多出 sex 属性

console.log(c1)

小技巧

可以通过在属性名后面加上?，表示当前属性为可选

class 类 – 基本使用

//定义一个类，名称为User
class User {
    name: string; //属性
    constructor(name: string) { //构造方法
        this.name = name
    }
    //方法
    study() {
        console.log(`${this.name}正在学习`)
    }
}

const u = new User('张三')

console.log(u.name)
u.study()//张三正在学习

class 类 – 实现接口

interface Animal {
    name: string
    eat(): void
}

//定义一个类Bird，实现上面的 Animal 接口
class Bird implements Animal{
    name: string
    constructor(name: string){
        this.name = name
    }
    eat(): void {
        console.log(this.name + ' eat')
    }
}

//创建类型为Bird的对象
const b1 = new Bird('杜鹃')
console.log(b1.name)
b1.eat()

class 类 – 类的继承

//定义Parrot类，并且继承 Bird类
class Parrot extends Bird {
    say():void {
        console.log(this.name + ' say hello')
    }
}

const myParrot = new Parrot('Polly')
myParrot.say()
myParrot.eat()//Polly eat