vue 基础

餐桌上的圣诞树

于 2022-08-27 21:26:12 发布

阅读量137

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_71538835/article/details/126561967

版权

前言

Vuex概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一.Vuex的作用

我们在用Vue进行单页面应用开发的时候，常常会遇到一个页面里面充斥着大量的Vue实例，一个Vue实例里面充斥着大量的参数，此时我们在修改一个参数的时候，可能会引起大量的连锁反应，这些反应是不可预测的，通常是我们不希望出现的。我们应该如何去管理这些，让这些参数可以被监管呢？此时我们就需要Vuex。

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

vue的引入

二. Vuex内部逻辑

来看Vuex里面包含的： Actions Mutations State

Vuex核心属性

Vuex实例：在学习核心参数之前，我们先看一下Vuex是如何使用的:

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同：

1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2）你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation：store.commit('increment');

Vue事件监听

监听事件: 之前我们学习了Vue中的指令，在Vue中事件的监听也是通过v-on这个指令添加到DOM元素上的。

该代码的作用是当你点击按钮的时候，按钮内的数字会随着你的点击不断往上加1。从代码中，我们可以看到v-on指令后面接的是事件的名称（click）。

事件处理方法： 之前，我们是直接在元素内部进行逻辑的书写的（v-on:click="count++"），然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称，就如同jQuery以及原生方法添加一样。

而方法的具体实现则被定义在methods的属性内部：

时刻记住：当在Vue内部想访问data中数据的时候，需要通过this。

事件修饰符：有的时候，我们会在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() ，但是这些与逻辑是没有关系的，只是为了解决一些事件冒泡等带来的问题。为了让方法归于逻辑，Vue为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的，例如：