苍穹外卖-day13（vue基础回顾+进阶）：vue基础（脚手架、根本语法，axios， ...

vue基础回顾+进阶

课程内容

• VUE 基础回顾
  
• 路由 Vue-Router
  
• 状态管理 vuex
  
• TypeScript
  

1. VUE 基础回顾

1.1 基于脚手架创建前端工程

1.1.1 环境要求

要想基于脚手架创建前端工程，需要具备如下环境要求：

• ​ node.js 前端项目的运行环境
  
  
  
  • 学习web阶段已安装
    
  
  
• ​ npm JavaScript的包管理工具
  
  
  
  • 安装完node.js之后自带了npm这个命令
    
  
  
• ​ Vue CLI 基于Vue举行快速开辟的完整系统，实现交互式的项目脚手架
  
  
  
  • 需要通过npm命令来安装
    
  
  

安装完node.js后，可以通过命令行来查看版本号，如下：

安装 Vue CLI，命令如下：

1.1.2 操纵过程

利用 Vue CLI 创建前端工程的方式：

• 方式一：vue create 项目名称
  
  
  
  • 管理员的方式打开Dos窗口，之后进入到一个非中文目录（这个目录当做我们的VScode工作空间），输入命令vue create vue-demo-1
    
    
    
    
  • 上下键选择vue的版本，这里以vue2为例
    
    
    
    
    
    
    
  • 可以看到vue项目创建乐成
    
    
    
    
    
    
    
  
  

• ​ 方式二：vue ui（推荐）
  

重点先容利用 vue ui 命令创建前端工程的过程：
第一步：同样首先以管理员的方式打开命令行窗口，之后切换到一个非中文的目录（这个目录当做我们的VScode工作空间），在命令行输入命令 vue ui，在浏览器ui界面中选择前端工程存放的位置

第二步：点击“在此创建新项目”按钮，跳转到创建新项目设置页面。填写项目名称、选择包管理器为npm，点击“下一步”按钮

第三步：选择 Default(Vue 2)，点击"创建项目"按钮，完成项目的创建

1.1.3 工程结构

工程目录结构：

1.1.4 启动前端服务

利用VS Code打开创建的前端工程，启动前端工程：

访问前端工程：

注：要停止前端服务，可以在命令行终端利用 ctrl + C
前端项目启动后，服务端口默以为8080，很容易和后端tomcat端口号冲突。如何修改前端服务的端口号？
可以在vue.config.js中配置前端服务端口号：

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   devServer: {
5.     port: 7070  //指定前端服务端口号
6.   }
7. })

复制代码

1.2 vue根本利用方式

本章节从如下几个方面举行vue回顾：

• vue 组件
  
• 文本插值
  
• 属性绑定
  
• 事件绑定
  
• 双向绑定
  
• 条件渲染
  
• axios
  

1.2.1 vue 组件

Vue 的组件文件以 .vue 末了，每个组件由三部门组成：

• 结构 <template>
  
• 样式 <style>
  
• 逻辑 <script>
  

1.2.2 测试准备工作

说明：

• 当前页面比力乱它自带了很多的数据，为了方便测试效果把数据给它清算一下。
  
  
  
  
  
  
  
  
  
  
• 可以看到页面上还显示一个图片，这是因为当前展示的这个页面并不是直接来自于HelloWorld.Vue组件而是这个App.vue，App.vue组件才是真正的项目入口页面，App.vue页面中又引入了HelloWorld.Vue组件，这个图片是设置在App.vue组件中，此时不想要图片需要到App.vue组件中举行删除。
  
  
  
  
• 效果
  
  
  
  

1.2.3 文本插值

作用：用来绑定 data 方法返回的对象属性
用法：{{插值表达式}}
示例：

测试：
代码：

1. <template>
2.   <div class="hello">
3.     {{name}}
4.     {{age > 60 ? '老年' : '青年'}}
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: 'HelloWorld',
11.   props: {
12.     msg: String
13.   },
14.   data() {
15.     return {
16.       name: '张三',
17.       age: 22
18.     }
19.   },
20.   
21. }
22. </script>
24. <!-- Add "scoped" attribute to limit CSS to this component only -->
25. <style scoped>
26. h3 {
27.   margin: 40px 0 0;
28. }
29. ul {
30.   list-style-type: none;
31.   padding: 0;
32. }
33. li {
34.   display: inline-block;
35.   margin: 0 10px;
36. }
37. a {
38.   color: #42b983;
39. }
40. </style>

复制代码

效果：

1.2.4 属性绑定

作用：为标签的属性绑定 data 方法中返回的属性
用法：v-bind:xxx，简写为 :xxx
示例：

测试：
代码

效果

1.2.5 事件绑定

作用：为元素绑定对应的事件
用法：v-on:xxx，简写为 @xxx
示例：

测试：
代码

效果

1.2.6 双向绑定

作用：表单输入项和 data 方法中的属性举行绑定，任意一方改变都会同步给另一方
用法：v-model
示例：

测试：
代码

效果：修改输入框的值name会发生变化，点击事件方法修改name的值输入框的值会跟着改变

1.2.7 条件渲染

作用：根据表达式的值来动态渲染页面元素
用法：v-if、v-else、v-else-if
示例：

测试：
代码

效果

1.2.8 axios

Axios 是一个基于 promise 的 网络哀求库，作用于浏览器和 node.js 中。利用Axios可以在前端项目中发送各种方式的HTTP哀求。
安装axios的命令：npm install axios（以管理员的方式打开VScode）

导入：import axios from 'axios'

axios 的 API 列表：[ ]代表可选参数，可以有可以没有。

参数说明：

• url：哀求路径
  
• data：哀求体数据，最常见的是JSON格式数据
  
• config：配置对象，可以设置查询参数、哀求头信息
  

注：在利用axios时，经常会遇到跨域问题。为相识决跨域问题，可以在 vue.config.js 文件中配置代理：

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   devServer: {
5.     port: 7070,
6.     proxy: {
7.       '/api': {
8.         target: 'http://localhost:8080',
9.         pathRewrite: {
10.           '^/api': ''
11.         }
12.       }
13.     }
14.   }
15. })

复制代码

axios的post哀求示例：

1. axios.post('/api/admin/employee/login',{
2.       username:'admin',
3.       password: '123456'
4.     }).then(res => {
5.       console.log(res.data)
6.     }).catch(error => {
7.       console.log(error.response)
8.     })

复制代码

axios的get哀求示例：

1. axios.get('/api/admin/shop/status',{
2.         headers: {
3.           token: ‘xxx.yyy.zzz’
4.         }
5.       })

复制代码

axios提供的统一利用方式示例一（可以发送各种方式的哀求）：

axios提供的统一利用方式示例二（可以发送各种方式的哀求）：

1. axios({
2.       url: '/api/admin/employee/login',
3.       method:'post',
4.       data: {
5.         username:'admin',
6.         password: '123456'
7.       }
8.     }).then((res) => {
9.       console.log(res.data.data.token)
10.       axios({
11.         url: '/api/admin/shop/status',
12.         method: 'get',
13.         params: {id: 100},
14.         headers: {
15.           token: res.data.data.token
16.         }
17.       })
18.     }).catch((error) => {
19.       console.log(error)
20.     })

复制代码

1.2.9 axios 测试：没有配置跨域----post哀求

HelloWorld.vue代码：

1. <input type="button" value="发送POST请求" @click="handleSendPOST"/>
6.     handleSendPOST() {
7.       //通过axios发送post请求 提供了url  data  没有提供config
8.       //地址是苍穹外卖后台登录的接口地址，后台项目要先启动
9.       axios.post('http://localhost:8080/admin/employee/login',{
10.         username: 'admin',
11.         password: '123456'
12.       }).then(res => {  //调用成功的回调函数
13.         console.log(res.data)
14.       }).catch(error => { //调用失败的回调函数
15.         console.log(error.response)
16.       })
17.     },

复制代码

启动后台项目，启动前端项目vue-demo-2，点击按钮发送哀求发现前后台没有任何反应，f12查看控制台发现报错（发生了跨域）

原因：发生了跨域问题，前端的访问端口是7070，后端的是8080，当前是在7070服务中往8080这个端口发送，以是产生了跨域。
解决：需要配置代理
1.2.10 axios 测试：配置跨域----post哀求

为相识决跨域问题，可以在 vue.config.js 文件中配置代理：
代理的作用：前端发送的哀求先哀求到代理上，然后由代理举行转发到我们的后台服务，这样就可以解决跨域问题了。

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   devServer: {
5.     port: 7070,
6.     proxy: {
7.       '/api': {//拦截前端发送的请求都含有api前缀的地址
8.         target: 'http://localhost:8080',//拦截后转发到的目标服务器地址
9.         pathRewrite: {//请求转发到后端后，后端接口路径多了个/api，匹配不上找不到controller，所以需要去掉
10.           '^/api': '' //路径重写：把/api替换为空串  ^api表示以/api作为开头
11.         }
12.       }
13.     }
14.   }
15. })

复制代码

修改HelloWorld.vue中发送的后台哀求地址：http://localhost:8080—》/api

因为修改的是配置文件以是需要重启前端项目才能生效

再次发送哀求：

1.2.11 axios 测试：get哀求

HelloWorld.vue代码：

1. <input type="button" value="发送GET请求" @click="handleSendGET"/>
4.     handleSendGET() {
5.       //通过axios发送get方式请求  指定了url（店铺的营业状态）  指定config
6.       axios.get('/api/admin/shop/status',{
7.         //这个请求需要携带jwt的令牌地址才能正确访问，复制上面发送post请求调用登录接口生成的令牌地址
8.         headers: { //指定config，在请求头里追加参数token
9.           token: 'eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzEwNjkyMTgxfQ.WAb2SoElTlJcobDCXUAqKPlm0At68LAexTz1MTwZdz4'
10.         }
11.       }).then(res => {
12.         console.log(res.data)
13.       })
14.     },

复制代码

对应的店铺营业状态接口：

首先发送post哀求，复制返回的token.

刷新页面发送get哀求：乐成

1.2.12 axios 测试：通用方式发送哀求

axios 统一利用方式：axios(config)
HelloWorld.vue代码：

1. <input type="button" value="统一请求方式" @click="handleSend"/>
4.     handleSend() {
5.       //使用axios提供的统一调用方式发送请求
6.       axios({
7.         url: '/api/admin/employee/login',
8.         method: 'post',  //默认是get
9.         data: { //data表示通过请求体传参  
10.           username: 'admin',
11.           password: '123456'
12.         }
13.       }).then(res => {//成功回调
14.         console.log(res.data.data.token) //res.data：返回的result对象，里面包含data，data中又包含token
15.         axios({  //在成功的回调函数里又发送一个get请求   获取店铺的营业状态
16.           url: '/api/admin/shop/status',
17.           method: 'get',
18.           headers: {
19.             token: res.data.data.token //因为这个get方法实际上是在post请求的回调函数里面，所以这个地方可以动态的获取token
20.           }
21.         })
22.       })
23.     }

复制代码

测试：2次哀求都乐成发送

2. 路由 Vue-Router

2.1 Vue-Router 先容

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。
单页面应用：在整个vue应用中，实际上只有一个页面，我们看到的浏览器多个页面实在是一种假象，它是通过页面切换 切换不同的视图组件
现实举例：一块黑板，不同的老师上课把之前老师写的内容删除掉，之后写上本身课的内容。
这个替换的过程就是通过路由来完成的。

如上图所示：不同的访问路径，对应不同的页面展示。
基于Vue CLI 创建带有路由功能的前端项目：
在vue应用中利用路由功能，需要安装Vue-Router：

注：创建完带有路由功能的前端项目后，在工程中会天生一个路由文件，如下所示：

关于路由的配置，重要就是在这个路由文件中完成的。
为了能够利用路由功能，在前端项目的入口文件main.js中，创建Vue实例时需要指定路由对象：
创建完路由项目后主动天生

启动项目查看效果：点击不同的地址会主动切换页面

说明：

• 什么是路由？
  
  
  
  • 根据浏览器访问路径不同，展示不同的视图组件
    
  
  
• vue应用中如何实现路由？
  
  
  
  • 通过 vue-router 实现路由功能，需要安装js库（npm install vue-router）
    
  • 刚才之以是没有显示的去安装是因为，在页面上利用了脚手架构建项目并且勾选了路由功能，这样的话在创建这个前端工程时，实际上就会通过这个命令安装所需要的库。
    
  • 如果是一个老项目利用路由功能，此时需要实行此命令手动安装。
    
  
  

2.2 路由配置

首先相识一下路由组成：

• VueRouter：路由器，根据路由哀求在路由视图中动态渲染对应的视图组件
  
  
  
  • 路由器作用：根据路由哀求来渲染这个不同的视图
    
  • 具体渲染哪一个视图组件呢？？？在路由器中实在会维护一个路由表，它里面生存了映射关系，某一个路由路径对应的那一个视图组件。
    
  
  
• <router-link>：路由链接组件，浏览器会解析成<a>
  
  
  
  • 作用：天生超链接标签的
    
  
  
• <router-view>：路由视图组件，用来展示与路由路径匹配的视图组件
  
  
  
  • 展示某一个视图组件指定的位置，本质是页面中的一个占位符，通过路由去渲染不同的视图组件，视图组件要渲染的就是这个页面<router-view>占位符地点的位置。
    
  
  

这三部门之间是如何协作的：

• 点击路由链接组件（超链接）发起路由哀求，这个哀求会交给路由器处理。
  
• 路由器会根据路由路径的不同然后去渲染对应的视图组件
  
• 具体渲染到这个路由视图组件 <router-view>这个占位符位置。
  

具体配置方式：
基于脚手架创建前端项目的时候勾选了路由功能，此时工程中路由的代码已经主动天生好了。
首先在package.json里面参加vue-router：此时就可以在前端项目中利用路由功能了

然后在main.js入口文件中引入router，这个router来自于index.js文件

找到router下面有一个index.js，然后在这个文件里引入VueRouter，这个VueRouter来自于node_modules（生存创建好项目之后所依赖的包）中的vue-router里

• 在路由文件index.js中配置路由路径和视图的对应关系：路由表
  

1. import Vue from 'vue'
2. import VueRouter from 'vue-router'
3. import HomeView from '../views/HomeView.vue'
5. Vue.use(VueRouter)
7. //维护路由表，某个路由路径对应哪个视图组件
8. const routes = [
9.   {
10.     path: '/',   //对应一个路由路径
11.     name: 'home',  //名字
12.     component: HomeView  //路径所对应的视图组件   方式一：静态导入，最终项目上线需要打包，打包会把这些组件
13.   },                     //                             打到同一个js文件里面，两种打包方式不同
14.                          //                        性能稍差：不管你视图展示不展示都打入到同一个js文件里面，导致这个js文件非常大，
15.                          //                                  哪怕你这个视图从来没有强求过没显示过，但是这部分资源已经加载了，
16.   {
17.     path: '/about',
18.     name: 'about',
19.     // route level code-splitting
20.     // this generates a separate chunk (about.[hash].js) for this route
21.     // which is lazy-loaded when the route is visited.
22.     //方式二：动态导入（推荐）  懒加载策略：打包的时候会单独的把这些组件打到js文件里面
23.     //                   性能更好：按需引入因为它是单独的把这些视图组件单独的打到js文件里面，
24.     //                            只有请求这个视图它才会加载这个js文件，如果不请求就不会加载了。
25.     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
26.   }
27. ]
29. const router = new VueRouter({
30.   routes
31. })
33. export default router

复制代码

• 在视图组件App.vue入口页面文件中配置 router-link标签，用于天生超链接
  
  
  
  

1.       <router-link to="/">Home</router-link> |  <!-- 路由链接组件生成超链接 -->
2.       <router-link to="/about">About</router-link>

复制代码

• 在视图组件汇总配置router-view标签：占位符，视图渲染到的位置
  
  
  
  
• 效果：可以来回切换
  

要实现路由跳转，可以通过标签式和编程式两种：

• 标签式：<router-link to="/about">About</router-link>
  
  
  
  • 通过router-link标签天生超链接实现跳转
    
  
  
• 编程式：this.$router.push('/about')
  
  
  
  • 通过js代码实现跳转
    
    
    
    
  
  

测试编程式：
代码：

1. <input type="button" value="编程式路由跳转" @click="jump"/> <!-- 方法不需要参数的话()可以省略掉 -->
4. <script>
5. export default {
6.   methods: {
7.     jump() {
8.       //使用编程路由的方式跳转   具体的路由路径（路由表中配置的路径）
9.       this.$router.push('/about',()=> {})
10.     }
11.   }
12. }
13. </script>

复制代码

效果：点击按钮也能跳转到about页面

问题思考：如果用户访问的路由地址不存在，该如何处理？
可以通过配置一个404视图组件，当访问的路由地址不存在时，则重定向到此视图组件，具体配置如下：
index.js文件：路由表

1.   /* 只写这一个配置的效果：我们访问到404路径的时候就可以访问到这个组件，而我们的需求是
2.      当用户访问一个不存在的路径时才会跳转到404视图去展示，所以还需要接着配置重定向*/
3.   {
4.     path: '/404',   //name可以不用配置
5.     component: () => import('../views/404View.vue')
6.   },
7. /* 配置重定向流程：当用户访问到一个不存在的路径就会重定向到/404,/404路径对应的就是404页面组件 */
8.   {
9.     path: '*', //上面这些访问的路径都没匹配上才会走这最后一个路径
10.     redirect: '/404' //重定向到/404访问路径，
11.   }

复制代码

App.vue：超链接

1. <router-link to="/test">Test</router-link> |   <!-- 没有对应的路由路径/test -->

复制代码

路由哀求路径不存在，跳转的页面组件：

1. <template>
2.   <div class="about">
3.     <h1>您请求的资源不存在</h1>
4.   </div>
5. </template>

复制代码

效果：

2.3 嵌套路由

嵌套路由：组件内要切换内容，就需要用到嵌套路由（子路由），效果如下：
在App.vue视图组件中有<router-view>标签，其他视图组件可以展示在此

ContainerView.vue组件可以展示在App.vue视图组件的<router-view>位置

ContainerView.vue组件举行了区域分别（分为上、左、右），在右边编写了<router-view>标签，点击左侧菜单时，可以将对应的子视图组件展示在此

总结：

• 原先是不同的vue组件嵌套到App.vue入口视图组件页面中
  
• 现在是不同的子组件先嵌套到ContainerView.vue组件中，ContainerView.vue组件在嵌套到App.vue入口视图组件中。
  

实现步骤：
第一步：安装并导入 elementui，实现页面布局（Container 布局容器）—ContainerView.vue
安装： elementui

1. npm i element-ui -S

复制代码

导入： elementui，在 main.js 中写入以下内容：

1. import ElementUI from 'element-ui';
2. import 'element-ui/lib/theme-chalk/index.css';
4. Vue.use(ElementUI);//全局使用ElementUi

复制代码

实现页面布局（Container 布局容器）—ContainerView.vue

1. <template>
2.   <el-container>
3.     <el-header>Header</el-header>
4.     <el-container>
5.         <el-aside width="200px">
6.         </el-aside>
7.         <el-main>
8.         </el-main>
9.     </el-container>
10.   </el-container>
11. </template>
13. <script>
14. export default {
16. }
17. </script>
19. <style>
20. .el-header, .el-footer {
21.     background-color: #B3C0D1;
22.     color: #333;
23.     text-align: center;
24.     line-height: 60px;
25.   }
26.   
27.   .el-aside {
28.     background-color: #D3DCE6;
29.     color: #333;
30.     text-align: center;
31.     line-height: 200px;
32.   }
33.   
34.   .el-main {
35.     background-color: #E9EEF3;
36.     color: #333;
37.     text-align: center;
38.     line-height: 160px;
39.   }
40.   
41.   body > .el-container {
42.     margin-bottom: 40px;
43.   }
44.   
45.   .el-container:nth-child(5) .el-aside,
46.   .el-container:nth-child(6) .el-aside {
47.     line-height: 260px;
48.   }
49.   
50.   .el-container:nth-child(7) .el-aside {
51.     line-height: 320px;
52.   }
53. </style>

复制代码

第二步：提供子视图组件，用于效果展示 —P1View.vue、P2View.vue、P3View.vue

1. <template>
2.   <div>
3.     这是P1 View
4.   </div>
5. </template>
7. <script>
8. export default {
10. }
11. </script>
13. <style>
14. .el-header, .el-footer {
15.     background-color: #B3C0D1;
16.     color: #333;
17.     text-align: center;
18.     line-height: 60px;
19.   }
20.   
21.   .el-aside {
22.     background-color: #D3DCE6;
23.     color: #333;
24.     text-align: center;
25.     line-height: 200px;
26.   }
27.   
28.   .el-main {
29.     background-color: #E9EEF3;
30.     color: #333;
31.     text-align: center;
32.     line-height: 160px;
33.   }
34.   
35.   body > .el-container {
36.     margin-bottom: 40px;
37.   }
38.   
39.   .el-container:nth-child(5) .el-aside,
40.   .el-container:nth-child(6) .el-aside {
41.     line-height: 260px;
42.   }
43.   
44.   .el-container:nth-child(7) .el-aside {
45.     line-height: 320px;
46.   }
47. </style>

复制代码

第三步：在 src/router/index.js 中配置路由映射规则（嵌套路由配置）

1.    {
2.     path: '/c',
3.     component: () => import('../views/container/ContainerView.vue'),
4.     //嵌套路由（子路由），对应的组件会展示在当前组件内部
5.     children: [//通过children属性指定子路由相关信息（path、component）
6.       {
7.         path: '/c/p1',
8.         component: () => import('../views/container/P1View.vue')
9.       },
10.       {
11.         path: '/c/p2',
12.         component: () => import('../views/container/P2View.vue')
13.       },
14.       {
15.         path: '/c/p3',
16.         component: () => import('../views/container/P3View.vue')
17.       }
18.     ]
19.   }

复制代码

第四步：在ContainerView.vue 布局容器视图中添加，实现子视图组件展示

1. <el-main>
2.     <router-view/>
3. </el-main>

复制代码

第五步：在ContainerView.vue 布局容器视图中添加，实现路由哀求

1. <el-aside width="200px">
2.     <router-link to="/c/p1">P1</router-link><br>
3.     <router-link to="/c/p2">P2</router-link><br>
4.     <router-link to="/c/p3">P3</router-link><br>
5. </el-aside>

复制代码

效果：http://localhost:8080/#/c

点击超链接（http://localhost:8080/#/c/p1）右侧会举行替换组件。

注意：子路由变化，切换的是【ContainerView 组件】中 <router-view></router-view> 部门的内容
问题思考：
1.对于前面的案例，如果用户访问的路由是 /c，会有什么效果呢？

2.如何实现在访问 /c 时，默认就展示某个子视图组件呢？
配置重定向，当访问/c时，直接重定向到/c/p1即可，如下配置：

1. redirect :'/c/p1',

复制代码

效果：

3. 状态管理 vuex（待定：P177）

3.1 vuex 先容

• vuex 是一个专为 Vue.js 应用程序开辟的状态管理库
  
• vuex 可以在多个组件之间共享数据，并且共享的数据是相应式的，即数据的变动能及时渲染到模板
  
• vuex 采用集中式存储管理所有组件的状态
  

每一个 Vuex 应用的焦点就是 store（堆栈）。“store”根本上就是一个容器，它包罗着你的应用中大部门的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是相应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具资助我们更好地相识我们的应用。
  

安装vuex：npm install vuex@next --save
vuex中的几个焦点概念：

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

3.2 利用方式

本章节通过一个案例来学习vuex的利用方式，具体操纵步骤如下：
第一步：创建带有vuex功能的前端项目

注：在创建的前端工程中，可以发现主动创建了vuex相干的文件(src/store/index.js)，并且在main.js中创建Vue实例时，需要将store对象传入，代码如下：

1. import Vue from 'vue'
2. import App from './App.vue'
3. import store from './store'
5. Vue.config.productionTip = false
7. new Vue({
8.   store,//使用vuex功能
9.   render: h => h(App)
10. }).$mount('#app')

复制代码

第二步：在src/store/index.js文件中集中定义和管理共享数据

1. import Vue from 'vue'
2. import Vuex from 'vuex'
3. import axios from 'axios'
5. Vue.use(Vuex)
7. //集中管理多个组件共享的数据
8. export default new Vuex.Store({
9.   //集中定义共享数据
10.   state: {
11.     name: '未登录游客'
12.   },
13.   getters: {
14.   },
15.   //通过当前属性中定义的函数修改共享数据，必须都是同步操作
16.   mutations: {
17.   },
18.   //通过actions调用mutation，在actions中可以进行异步操作
19.   actions: {
20.   },
21.   modules: {
22.   }
23. })

复制代码

第三步：在视图组件中展示共享数据

1. <template>
2.   <div class="hello">
3.     <h1>欢迎你，{{$store.state.name}}</h1>
4.   </div>
5. </template>

复制代码

注：$store.state为固定写法，用于访问共享数据
第四步：在mutations中定义函数，用于修改共享数据

1.   //通过当前属性中定义的函数修改共享数据，必须都是同步操作
2.   mutations: {
3.     setName(state,newName) {
4.       state.name = newName
5.     }
6.   },

复制代码

第五步：在视图组件中调用 mutations 中定义的函数

注：mutations中定义的函数不能直接调用，必须通过状态对象的 commit 方法来调用
第六步：如果在修改共享数据的过程中有异步操纵，则需要将异步操纵的代码编写在actions的函数中

1.   //通过actions调用mutation，在actions中可以进行异步操作
2.   actions: {
3.     setNameByAxios(context){
4.       axios({ //异步请求
5.         url: '/api/admin/employee/login',
6.         method: 'post',
7.         data: {
8.           username: 'admin',
9.           password: '123456'
10.         }
11.       }).then(res => {
12.         if(res.data.code == 1){
13.           //异步请求后，需要修改共享数据
14.           //在actions中调用mutation中定义的setName函数
15.           context.commit('setName',res.data.data.name)
16.         }
17.       })
18.     }
19.   },

复制代码

注：在actions中定义的函数可以声明context参数，通过此参数可以调用mutations中定义的函数
第七步：在视图组件中调用actions中定义的函数

注：在actions中定义的函数不能直接调用，必须通过 this.$store.dispatch(‘函数名称’) 这种方式调用
4. TypeScript

4.1 TypeScript 先容

• TypeScript（简称：TS） 是微软推出的开源语言
  
• TypeScript 是 JavaScript 的超集（JS 有的 TS 都有）
  

• TypeScript = Type + JavaScript（在 JS 基础上增长了范例支持）
  
• TypeScript 文件扩展名为 ts
  
• TypeScript 可编译成标准的 JavaScript，并且在编译时举行范例查抄
  

在前端项目中利用TS，需要举行安装，命令为：npm install -g typescript
查看TS版本：

TS初体验：

• 创建 hello.ts 文件，内容如下：
  

1. //定义一个函数 hello，并且指定参数类型为string
2. function hello(msg:string) {
3.       console.log(msg)
4. }
6. //调用上面的函数，传递非string类型的参数
7. hello(123)

复制代码

• 利用 tsc 命令编译 hello.ts 文件
  

可以看到编译报错，提示参数范例不匹配。这说明在编译时TS会举行范例查抄。需要注意的是在编译为JS文件后，范例会被擦除。
思考：TS 为什么要增长范例支持 ？

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

在前端项目中利用TS，需要创建基于TS的前端工程：

4.2 TypeScript 常用范例

TS中的常用范例如下：
范例例备注字符串范例string数字范例number布尔范例boolean数组范例number[],string[], boolean[] 依此类推任意范例any相称于又回到了没有范例的时代复杂范例type 与 interface函数范例() => void对函数的参数和返回值举行说明字面量范例“a”|“b”|“c”限制变量或参数的取值class 类class Animal 4.2.1 范例标注的位置

基于TS举行前端开辟时，范例标注的位置有如下3个：

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

4.2.2 字符串、数字、布尔范例

字符串、数字、布尔范例是前端开辟中常用的范例

4.2.3 字面量范例

字面量范例用于限定命据的取值范围，雷同于java中的枚举

4.2.4 interface 范例

interface 范例是TS中的复杂范例，它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的本领。

可以通过在属性名后面加上？，表示当前属性为可选，如下：

4.2.5 class 范例

利用 class 关键字来定义类，类中可以包罗属性、构造方法、普通方法等

在定义类时，可以利用 implments 关键字实现接口，如下：

在定义类时，可以利用 extends 关键字 继承其他类，如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。