Web学习笔记——Vue（下）

程序崽

已于 2023-01-17 11:10:06 修改

阅读量234

点赞数

文章标签： vue.js 前端学习

于 2023-01-15 17:49:13 首次发布

本文链接：https://blog.csdn.net/weixin_57599261/article/details/128689253

版权

Vue学习笔记（下）

七、表单处理
八、组件
九、Axios 的使用
- - 1、Axios 简介
  - 2、Axios 与 Vue 的钩子函数的结合使用
十、Vue-Router 路由管理器
十一、Vuex 状态管理器

七、表单处理

在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

1、基本用法

常用表单元素

元素	作用
input[type=*]	文本输入框
textarea	多行文本
radio	单选按钮
checkbox	复选框
select	选择框

注意
注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；
checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；
select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。
说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。

文本

直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。

    <div id="app">
      <input v-model="msg" placeholder="请输入..." />
      <p>输入的是: {{ msg }}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>

多行文本

多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。

    <div id="app">
      <span>Multiline message is:</span>
      <p style="white-space: pre-line;">{{ message }}</p>
      <br />
      <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            message: "",
          };
        },
      });
    </script>

单选按钮

将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。

    <div id="app">
      <!-- 将单选按钮绑定到同一个 picked -->
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>

复选框

复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。

    <div id="app">
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
      // 绑定布尔值
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checked: false,
          };
        },
      });
    </script>

多个复选框

通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。

    <div id="app">
      <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" />
      <label for="syl1">syl1</label>
      <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames" />
      <label for="syl2">syl2</label>
      <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames" />
      <label for="syl3">syl3</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checkedNames: [],
          };
        },
      });
    </script>

选择框

在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。

    <div id="app">
      <!-- select 标签是绑定  数据项 selected -->
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
          };
        },
      });
    </script>

2、值绑定

文本和多行文本值绑定
直接在标签上指定 value 是不能成功的，会被 Vue 忽略。

    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" value="hello" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>

正确模式，通过 JavaScript 在组件的 data 选项中声明初始值：

    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" />
      <br />
      <br />
      <br />
      <textarea v-model="msg"></textarea>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>

单选按钮

checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。

    <div id="app">
      <!-- 当选中时，`picked` 为字符串 "a" -->
      <input type="radio" v-model="picked" value="a" />
      {{picked}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>

复选框

复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。

    <div id="app">
      <!-- 当复选框选中时，toggle 的值为 true，未选中为 false -->
      <input type="checkbox" v-model="toggle" />
      {{toggle}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: false,
          };
        },
      });
    </script>

在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value=“yes” 和 false-value=“no” 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。

    <div id="app">
      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
      />
      <p>toggle:{{toggle}}</p>
    </div>
    <script>
      // 通过 true-value="yes" false-value="no" 属性控制，选中时 toggle 值为 yes，未选中时为 no
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: "",
          };
        },
      });
    </script>

如果只想要选中有值，可以这样做，true-value 属性指定值，false-value 属性设为空值。

<input type="checkbox" v-model="toggle" true-value="name" false-value="" />

选择框

选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的：

    <div id="app">
      <!-- 当选中第一个选项时，selected 为字符串 "abc" -->
      <select v-model="selected">
        <!-- 固定赋值value -->
        <option value="abc">ABC</option>
        <!-- 使用 v-bind 绑定值 -->
        <option v-bind:value="optionValue">DEF</option>
      </select>
      <p>{{selected}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
            // 第二个 option 的值
            optionValue: "efg",
          };
        },
      });
    </script>

3、修饰符

.lazy
不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，可以使用 .lazy 修饰符，将 input 事件与 change 事件替换，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。

    <div id="app">
      <!--使用 .lazy 修饰符将文本框 抛出的事件改为 change 事件，不再实时更新，只有文本框失去焦点才更新数据 惰性更新 -->
      <input v-model.lazy="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。

    <div id="app">
      <p>没有使用 .number 修饰符</p>
      <input v-model="number1" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number1)}}</p>
      <p>使用 .number 修饰符</p>
      <input v-model.number="number2" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number2)}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          number1: "",
          number2: "",
        },
      });
    </script>

.trim

表单元素值首尾空格，自动过滤。

    <div id="app">
      <input v-model.trim="msg" type="text" />
      <p>首尾空格被过滤了：{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>

八、组件

Vue 支持模块化和组件化开发，可以将整个页面进行模块化分割，低耦合高内聚，使得代码可以在各个地方使用。

1、组件注册

组件分为全局组件和局部组件。

全局注册

Vue.component() 方法注册全局组件。

    <div id="app">
      <syl></syl>
      <syl></syl>
      <syl></syl>
    </div>
    <script>
      // Vue.component(组件名字,template:{元素标签})
      Vue.component("syl", {
        template: "<h1>河科院全局组件</h1>",
      });
      var app = new Vue({
        el: "#app",
      });
    </script>

局部组件

在父级 components 对象中声明，局部组件只有它的父级才能调用。
局部组件使用：

    <div id="header">
      <syl-header></syl-header>
    </div>
    <div id="mid">
      <syl-mid></syl-mid>
    </div>
    <script>
      // 头部组件
      var childComponent = {
        template: "<h2>我是河科院局部组件header，只有我们父级才能调用</h2>",
      };
      // 中间部分组件
      var childComponent2 = {
        template: "<h2>我是河科院局部组件mid，只有我们父级才能调用</h2>",
      };
      // header vm
      var header = new Vue({
        el: "#header",
        // 子组件必须声明后使用，不然不能起效
        components: {
          "syl-header": childComponent,
        },
      });
      var mid = new Vue({
        el: "#mid",
        // 子组件必须声明后使用，不然不能起效
        components: {
          "syl-mid": childComponent2,
        },
      });
    </script>

2、组件复用

组件的优点就在于能够复用，一次代码编写，整个项目受用。
注意：复用组件内的 data 必须是一个函数，如果是一个对象（引用类型），组件与组件间会相互影响，组件数据不能独立管理。

   <div id="app">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
    <script>
      // 注册一个全局可复用组件
      Vue.component("button-counter", {
        // data 必须是一个函数不然会影响其他组件
        data() {
          return {
            counter: 0,
          };
        },
        template: '<button @click="counter++">{{counter}}</button>',
      });
      var app = new Vue({
        el: "#app",
      });
    </script>

3、组件间通信

组件之间也面临着数据流动，也可以进行通信。下面我们来学习组件间的通信。
父子组件之 props
props 是一个单向的数据流，只允许父组件向子组件传值，值类型可以是一个数值、字符、布尔值、数值、对象，子组件需要显式地用 props 选项声明 “prop”。
注意：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 需要使用其等价的 kebab-case (短横线分隔命名) 命名。

    <div id="app">
      <title-component post-title="syl1"></title-component>
      <title-component post-title="syl2"></title-component>
      <title-component post-title="syl3"></title-component>
    </div>
    <script>
      // 注册一个 title 组件，通过传入不同的 title 值，渲染不同的东西
      // 组件上 传递的 props 属性名为 kebab-case（短横线分隔命名）的要转换为驼峰命名
      Vue.component("title-component", {
        props: ["postTitle"], // post-title 转换为驼峰命名
        template: "<p>{{postTitle}}</p>",
      });
      var app = new Vue({
        el: "#app",
      });
    </script>

props 类型检测

到这里，我们只看到了以字符串数组形式列出的 prop：

props: ["postTitle"];

但是，通常希望每个 prop 都有指定的值类型。这时，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props:{
    title:String,
    id:Number,
    content:String
}

    <div id="app">
      <child-component
        id="1"
        title="hello syl"
        content="you are welcom"
      ></child-component>
    </div>
    <script>
      // 注册一个子组件
      Vue.component("child-component", {
        // props 对象形式，传递属性值 进行类型检测，在脚手架环境中很有用
        props: {
          id: Number,
          title: String,
          content: String,
        },
        // 使用 es6 模板字符串书写格式更优美
        template: `<div><p>id:{{id}}</p><p>title:{{title}}</p><p>content:{{content}}</p></div>`,
      });
      var app = new Vue({
        el: "#app",
      });
    </script>

子父组件通信之 emit

上面提到 props 实现父向子组件传递数据是单向流的，那么，如何实现子组件向父组件通信呢？这里要使用自定义事件 emit 方法，通过自定义事件来由下到上的数据流动。
语法如下：

this.$emit('自定义事件名'，参数)

    <div id="app">
      <child-component v-on:send-msg="getMsg"></child-component>
    </div>
    <script>
      // 定义一个子组件，template 绑定 click 事件
      // 当 click 事件触发就使用 emit 自定义一个事件 send-msg，传入参数 “我是子组件请求与你通信”
      // $emit('send-msg','我是子组件请求与你通信')
      // 子组件标签上绑定自定义事件 send-msg，并绑定上父级的方法 getMsg，即可完成了子父组件通信
      // <child-component v-on:send-msg="getMsg"></child-component>
      Vue.component("child-component", {
        template: `
                <button v-on:click="$emit('send-msg','我是子组件请求与你通信')">
                Click me
                </button>
                `,
      });
      var app = new Vue({
        el: "#app",
        methods: {
          getMsg: function (msg) {
            // 弹出子组件传递的信息
            alert(msg);
          },
        },
      });
    </script>

子组件向父组件数据传递套路：
第一步：子组件绑定事件。
第二步：子组件绑定事件触发，使用 $emit 创建自定义事件并传入需要传值给父组件的数据。
第三步：在子组件标签上用 v-on 绑定自定义事件，在父组件中声明自定义事件处理的方法。
第四步：父组件方法，接受自定义事件传的参数，就完成了整个由下到上的数据流。

4、动态组件

上面例子我们传值都是直接传的固定值，其实动态传值我们也支持，生成动态组件，使用 v-bind 动态绑定 props 值。

    <div id="app">
      <!-- 使用 v-bind 简写模式 动态绑定 props 值 -->
      <child-component
        :name="name"
        :age="age"
        :height="height"
      ></child-component>
      <child-component
        :name="name+'2'"
        :age="age+1"
        :height="height"
      ></child-component>
    </div>
    <script>
      // 定义一个子组件
      Vue.component("child-component", {
        // 使用属性类型检测
        props: {
          name: String,
          age: Number,
          height: String,
        },
        template: `
            <ul>
                <li>{{name}}</li>
                <li>{{age}}</li>
                <li>{{height}}</li>
            </ul>
            `,
      });
      var app = new Vue({
        el: "#app",
        data() {
          return {
            name: "syl",
            age: 20,
            height: "180cm",
          };
        },
      });
    </script>

5、生命周期函数

接触了组件后，应该需要了解整个实例的生命周期是怎么样的，有哪些钩子函数，在哪个阶段我们能操作什么，实例在不同的阶段都会抛出不同的钩子函数，方便开发者能够精确的控制整个流程。

    <div id="app">
      <button @click="handleClick">{{name}}</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            name: "syl",
          };
        },
        methods: {
          handleClick: function () {
            this.name = "syl syl";
          },
        },
        beforeCreate() {
          alert(
            "在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用"
          );
        },
        created() {
          alert(
            "在实例创建完成后被立即调用,挂载阶段还没开始，$el 属性目前不可见"
          );
        },
        beforeMount() {
          alert("在挂载开始之前被调用：相关的 render 函数首次被调用");
        },
        mounted() {
          alert("el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子");
        },
        beforeUpdate() {
          alert("数据更新时调用");
        },
        updated() {
          alert("组件 DOM 已经更新");
        },
        beforeDestroy() {},
        destroyed() {},
      });
    </script>

经常主要用到有：
1、created 钩子函数内我们可以进行异步数据请求。

created() {
    fetch('url')
    .then(function(response) {
        console.log(response)
    })
}

2、mounted 我们可以直接操作元素 DOM 了，但是并不推荐这样做，不利于性能提升。

    <div id="app">
      <div id="box" style="width:40px;background: tomato;">点击</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {};
        },
        // div#box 开始并没有绑定事件，挂载后我们直接操作原生 dom
        mounted() {
          var box = document.querySelector("#box");
          box.addEventListener("click", function () {
            alert("我们挂载后 原生点击事件");
          });
        },
      });
    </script>

生命周期示意图
一个 Vue 实例从创建到销毁的完善周期，以及相关周期，向外抛出的钩子函数。
在这里插入图片描述

九、Axios 的使用

1、Axios 简介

Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装，且具有易用、简洁、高效等特点。
Axios 的特点
它本身具备以下作用：

可以从浏览器中创建 XMLHttpRequest。
能从 Node.js 创建 HTTP 请求。
支持 Promise API。
能够拦截请求和响应。
可以转换请求和响应数据。
也可取消请求。
可以自动转换 JSON 数据。
在客户端支持防止 CSRF/XSRF 攻击。

Axios 的安装方式
Axios 的安装与其他框架或插件类似，也是分为以下两种：

npm 安装

npm install axios

使用 <script> 直接引入

<script src="axios.min.js"></script>

Axios 基本用法
1、新建一个 html 文件，并引入 axios.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Axios 的 CDN -->
    <script src="axios.min.js"></script>
  </head>
  <body></body>
</html>

2、创建一个名为 test.json 的文件，作为接下来使用 Axios 请求的数据文件，并写入以下数据：

{
  "msg": "Hello Axios!"
}

3、最后，在 html 文件中使用 Axios 发送一个简单的 Ajax 请求，用于获取 test.json 中的数据，并输出在控制台：

<script type="text/javascript">
  axios.get("./test.json").then((res) => {
    console.log(res);
  });
</script>

通过 Axios 获取到的数据实际上就是一个 Ajax 对象，真正需要我们请求的数据是该 Ajax 对象的 data 属性值。上面这个例子只是 Axios 众多使用方式中的一种，它主要是用于执行 get 请求。
常用的使用方式
1、执行 get 数据请求。

axios.get('url',{
  params:{
    id:'接口配置参数（相当于url?id=xxxx）'，
  },
}).then(function(res){
  console.log(res); // 处理成功的函数 相当于 success
}).catch(function(error){
  console.log(error) // 错误处理 相当于 error
})

2、执行 post 数据请求并发送数据给后端。

axios
  .post(
    "url",
    { data: {} },
    {
      headers: "xxxx", // 头部配置
    }
  )
  .then(function (res) {
    console.log(res); // 处理成功的函数 相当于 success
  })
  .catch(function (error) {
    console.log(error); // 错误处理 相当于 error
  });

3、通用方式（适用于任何请求方式）。

//-------------------get-----------------------//
axios({
  method: "get",
  url: "xxx",
  cache: false,
  params: {
    id: 123,
  },
  headers: "xxx",
});
//-------------------post-----------------------//
axios({
  method: "post",
  url: "xxx",
  data: {
    firstName: "Tom",
    lastName: "Sun",
  },
});

其中需要注意的是，get 和 post 请求中向后端传递参数的配置项名字不同：get 请求的需要使用 params，post 请求用于发送数据的为 data。

2、Axios 与 Vue 的钩子函数的结合使用

1、首先，创建 dataList.json 文件，将 demo.html 中 dataList 的初始值存入其中：

["HTML", "CSS", "JavaScript", "Vue.js", "Axios"]

2、从 created 开始，我们就可以更新 data 中的数据了；beforeUpdate 和 update 中又不能执行对 data 的更新操作（因为会死循环）；beforeUnmount 和 unmounted 也不太合适（因为组件实例都要销毁了）；这么看来，合适的也只有 created、beforeMount 和 mounted 了。
事实证明这三个函数都可以，不过我们一般会在 created 和 mounted 中做数据更新的操作，因为这两个函数分别是“实例初始化完成”和“组件挂载完成”的最佳时机。
用 created ，因为这个时候组件还未挂载到 DOM 树上，并不会因为 data 中数据的更新而触发组件重新渲染一遍。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in dataList">{{item}}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          dataList: [],
        },
      });
      created(){
          this.getData();
      },
      methods:{
        getData(){
            axios.get('dataList.json')
            .then(res=>{
                this.dataList = res.data;
            })
        }
     }
    </script>
  </body>
</html>

十、Vue-Router 路由管理器

1、前端路由的概念及作用

前端路由实现原理与日常生活中的路由器基本相同。它代表一个 URL 与相应处理程序的映射关系。
用户在输入要访问的 URL 之后，路由会解析 URL 中的路径，之后根据映射表中的映射关系查找相应的预设函数，并将结果返回给用户，以此完成一次操作。
其工作流程如下图所示：
在这里插入图片描述
以上图为例，当一个用户使用 https://www.lanqiao.cn/a 来访问网页时，Web 服务会接收到这个请求，然后解析 URL 中的路径 /a，在 Web 服务程序中该路径对应着响应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次“路由分发”，这个分发就是通过“路由”来完成的。
简单地说，路由所做的工作就是：根据不同的 URL 地址展示不同的内容或页面。
前端路由不同于传统路由，它不需要服务器来进行解析，而是通过一个 hash 函数或者 H5 提供的 history API 来实现。一般使用前端路由的应用为不涉及到页面间跳转的单页面应用。
前端路由的优缺点
前端路由的优点如下：

页面刷新速度快：由于不需要向服务器发送请求，所以这个过程不会受到网络延迟的影响，实际上只是完成部分组件间的切换，因此页面的刷新速度会比较快，用户体验也更好些。
复用性强：由于使用前端路由的应用为单页面应用，所以代码中很多 CSS、JS 都可以共用，避免了过多的重复加载，大大提升了性能。
页面状态可记录：如果不使用前端路由，仅通过 Ajax 在页面进行局部切换的应用，由于页面 URL 始终保持不变，因此页面的状态是无法记录的，而前端路由很好的解决了这个问题。例如，使用了前端路由的应用中访问 https://www.lanqiao.cn/a 这个链接，再打开后会直接触发 /a 匹配的路由页面中的事件。

当然，前端路由也有一些缺点，比如使用浏览器的前进、后退键的时候，会重新发送请求，没有合理地利用缓存。

2、Vue-Router 的安装

Vue-Router 是 Vue 的官方路由，专门为 Vue 的单页面应用量身打造。
其功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

与当前大部分流行的框架或插件的使用方式相同，Vue-Router 的安装也有 CDN 和 NPM 两种主流方式。如下所示：
CDN 引入
Unpkg.com 提供了基于 npm 的 CDN 链接。

https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

NPM 安装
我们可以在项目文件夹下直接运行以下命令来安装 Vue-Router。

npm install vue-router@4

安装完成后，我们还需通过简单配置将 Vue-Router 与 Vue 实例联系在一起。

3、Vue-Router 的基本使用

以一个单页面应用来看看 Vue-Router 的使用，其基本步骤如下所示：

使用 router-link 组件来导航，其通过 to 属性来指定跳转链接（这相当于 HTML 中的 a 标签）。
使用 router-view 组件定义路由出口，路由匹配到的组件将会渲染到此处。
使用 const routes = [{ path, component }] 来定义路由（路径和组件名）。
使用 const router = new VueRouter({}) 来创建路由实例，在其中传入上一步定义的路由配置 routes。
创建和挂载根实例，在 new Vue 中挂载上一步创建的路由实例 router。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>路由的使用</h1>
      <p>
        <!-- 使用 router-link 组件来导航 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/hot">热门</router-link>
        <router-link to="/class">分类</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>首页</div>" };
      const Hot = { template: "<div>热门</div>" };
      const Class = { template: "<div>分类</div>" };

      // 定义路由
      const routes = [
        { path: "/home", component: Home },
        { path: "/hot", component: Hot },
        { path: "/class", component: Class },
      ];

      // 创建 router 实例，然后传 routes 配置
      const router = new VueRouter({
        routes,
      });

      // 创建和挂载根实例
      const app = new Vue({
        router,
      }).$mount("#app");
    </script>
  </body>
</html>

十一、Vuex 状态管理器

Vue 借鉴了 redux 和 flux 两种常用的数据流解决方案，开发了一个与 Vue 高度融合的数据流管理插件 Vuex。

1、Vuex 的简介

Vuex 是一个专门为 Vue 应用程序开发的状态管理模式。通过它可以将 Vue 应用中所有组件的共享状态储存管理起来，并以一定的规则保证这些状态以一种可预测的方式发生变化。
Vuex 应用场景及工作原理
组件之间的通讯有父子和兄弟这两层关系。其中兄弟组件之间的通信较为复杂，我们借助于它们共有的父组件来负责信息的传递。其过程如图所示：
在这里插入图片描述
随着业务逻辑的不断增多，难免会遇到相互之间没有任何联系的组件间共用响应式数据的情况。
将商品数据添加到购物车这一应用场景中，如果详情页、首页的商品列表以及搜索列表页中，都需要通过点击按钮添加商品到购物车，并且在底部导航中可以看出动态的更新效果。由于层级较多，组件间关系复杂等因素，借助于传统的组件通信方式来实现就会非常繁琐，代码维护起来也及其费力。组件之间传递数据的过程可能是下面这种场景：
在这里插入图片描述
针对这种情况，就可以使用状态管理器来作为组件件沟通的桥梁。它就像所有组件共用的状态（即响应式数据）管理中心，可以将多个组件共用的状态存储起来，供它们访问或修改，所有组件都可以通过它上下平行地通知其它组件该状态发生了变化。如图所示：
在这里插入图片描述
状态管理器简化了组件之间的关系，以一种一对一的关系去更新它们的共享状态互不干扰。

2、Vuex 的安装与配置

Vuex 的安装
与当前流行的其它插件和框架的安装方式相同，Vuex 也有直接引入式和安装到项目两种方式。
可以通过 Unpkg.com 提供的 CDN 链接直接在 HTML 中引入最新版和指定版本。语法如下：

<!-- 引入最新版本 -->
<script src="https://unpkg.com/vuex"></script>
<!-- 引入指定版本 -->
<script src="https://unpkg.com/vuex@2.0.0"></script>

也可以通过 NPM 或 Yarn 将其安装在项目中。

# NPM 安装命令
npm install vuex@3.6.2 --save
# Yarn 安装命令
yarn add vuex

Vue 2 中只能使用 vuex 3 。
在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

3、Vuex 的核心概念

核心概念之：State

首先，在 main.js 文件中写入以下代码：

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex"; // 导入 Vuex

Vue.use(Vuex); // 使用 Vuex，让 Vuex 可以访问到 Vue
Vue.config.productionTip = false;

// 创建 Store 实例
const store = new Vuex.Store({
  state: {
    count: 0, // 计数器的初始值
  },
});

new Vue({
  store, // 注入 Store
  render: (h) => h(App),
}).$mount("#app");

Vuex 应用的核心就是 store（仓库）。它是一个用于存储组件共享状态（state）的容器，就像一个小型的数据仓库。它所有的功能和操作都是用于处理这个仓库中的状态而存在的，所以在创建 Vuex 配置的时候都是以 store 命名。
接下来，在 App.vue 中将计数器的状态展示出来，在文件中写入以下代码。

<template>
  <div id="app">{{count}}</div>
</template>

<script>
  export default {
    name: "App",
    // 通过计算属性来访问 count
    computed: {
      count() {
        return this.$store.state.count;
      },
    },
  };
</script>

核心概念之：Mutations

在 App.vue 文件中定义一个按钮，新增代码如下：

<!--绑定一个点击事件，用 increment 来执行 count++ 的逻辑-->
<button @click="$store.commit('increment')">++</button>

在 main.js 文件中增加 mutations，代码如下：

const store = new Vuex.Store({
  // 此处省略 ...
  mutations: {
    increment(state) {
      state.count++; // 执行 count++ 的操作
    },
  },
});

从上面的使用我们可以看出 state 就是用来存储和初始化状态。

核心概念之：Actions

有时候需要向后台发出一些异步请求，我们不能直接在 mutations 里进行操作，这时就可以在 actions 中定义一些异步操作。
下面来模拟一下异步操作，在页面上新增一个按钮，触发 count-- 的操作。在 App.vue 中新增以下代码：

<button @click="$store.dispatch('decrement')">--</button>

注意哦：Actions 是通过 store.dispatch 方法来触发 actions 更新 state 状态。
在 main.js 文件中新增以下内容：

const store = new Vuex.Store({
  mutations: {
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    decrement({ commit }) {
      setTimeout(() => {
        // 通过 commit 交给 mutations 去处理
        commit("decrement");
      }, 500);
    },
  },
});

actions 与 mutations 的区别
actions 类似于 mutations，不同的是：

actions 中的更新函数最终仍是通过调用 mutations 中的函数来更新状态的，不能通过它直接变更状态。
与 mutations 不同，actions 中可以包含任意异步操作。

心概念之：Getters

getters 可以帮助我们缓存数据。
增加一个每次计数增加两倍的功能，在 main.js 中新增以下代码：

getters: {
    doubleCount(state) {
      return state.count * 2
    }
}

然后在页面上获取数据，在 App 文件中新增以下代码：

{{$store.getters.doubleCount}}

Vuex 规则

在实际开发中 Vuex 并不会限制我们的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要遵守以上规则，如何组织代码随意。

核心概念之：Module

按照业务逻辑划分为单个的 store，里面包含该模块中的 state、mutations 等。就像下图那样：
在这里插入图片描述
由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象中。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
在这里插入图片描述

具体语法如下：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

分割后的项目结构如下：

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 根级别的 state
    ├── getters.js        # 根级别的 getters
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块