网站图标在哪里修改北京工商注册代理

当前位置： 首页 > news >正文

网站图标在哪里修改,北京工商注册代理,设计师交流平台有哪些,建设网站的视频目录 前言 一、VueX简介

1. 什么是VueX
2. VueX的作用及重要性
3. VueX的应用场景 二、VueX的使用准备工作
4. 下载安装VueX
5. vuex获取值以及改变值 2.1 创建所需示例 2.2 将创建好的.vue文件页面显示 2.3 创建VueX的相关文件 2.4 配置VueX四个js文件 2.5 加载到vue示… 目录 前言 一、VueX简介
6. 什么是VueX
7. VueX的作用及重要性
8. VueX的应用场景 二、VueX的使用准备工作
9. 下载安装VueX 2. vuex获取值以及改变值 2.1 创建所需示例 2.2 将创建好的.vue文件页面显示 2.3 创建VueX的相关文件 2.4 配置VueX四个js文件 2.5 加载到vue示例中 三、VueX获取值及改变值 3.1 获取值 work1.vue state.js 方式一(不推荐) 方式二 3.2 改变值 work1.vue mutation.js 效果 3.3 跨页面传值 work2.vue 效果 四、VueX之异步请求
10. 什么是异步请求 4.2 异步请求与同步请求的区别 4.3 异步请求与同步请求的好处 4.4  异步请求与同步请求的使用情况 4.5 案例演示 模拟一 work1.vue actions.js 效果 模拟二异步请求后台 work1.vue actions.js 请求路径 直接运行结果 优化后的请求后台 work1.vue actions.js 效果 前言 在上一期以及之前几期的博客中我们都是分享了有关ElementUI在Vue中的一些知识点运用以及案例演示在往前还分享了像组件通信之类的Vue知识。今天我给老铁们带来的是是与组件通信有关今天分享的是VueX。 一、VueX简介
11. 什么是VueX VueX 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以可预测的方式进行状态的变更。VueX 基于 Flux 和 Redux 架构的思想通过单向数据流的方式来管理应用中的状态。         在 VueX 中状态被存储在一个被称为「store」的容器中组件可以通过提交commit一些特定的「mutations」来改变这个状态。这种改变是同步的并且由 VueX 确保所有的状态变更都是可跟踪的。此外VueX 也支持异步操作通过触发dispatch一些特定的「actions」来处理异步的逻辑。最后通过使用「getters」组件可以从 store 中获取状态以便在应用中使用。 2. VueX的作用及重要性 作用及重要性体现在一下几个方面 状态集中管理VueX 提供了一个全局的状态容器store将应用程序的状态集中管理起来。通过单一的状态树可以追踪和调试整个应用程序的状态变化。这样可以避免状态分散、逻辑混乱的问题提高开发效率和可维护性。 组件间通信和共享状态在大型应用中多个组件可能需要共享相同的状态数据。VueX 提供了一种统一的状态管理机制允许多个组件直接访问和修改状态取代了传统的组件间的事件传递、属性传递等繁琐的通信方式。这样可以简化组件之间的数据传递提高组件的可复用性。 异步操作和状态管理在实际应用中很多情况下需要处理异步的逻辑例如发送网络请求、异步数据获取等。VueX 提供了「actions」来处理异步操作保证异步操作和状态的一致性。这使得应用程序中的异步逻辑更可控、更易于管理。 易于调试和追踪VueX 提供了开发者工具集成可以轻松地调试和追踪状态的变化。通过开发者工具的支持可以查看每个状态的变化、时间旅行回放等更方便地定位问题和进行性能优化。         总之VueX 的作用和重要性在于提供了一种集中、可预测和可维护的方式来管理和共享应用程序的状态。它解决了多个组件之间通信和状态共享的问题简化了应用的复杂性提高了开发效率和可维护性。在大型应用程序中使用 VueX 可以更好地组织和管理状态提供更好的用户体验和开发体验。 3. VueX的应用场景 大型应用程序当应用程序规模较大有很多组件需要共享状态或进行复杂的状态管理时VueX 可以帮助更好地组织和管理状态简化组件间的通信和数据传递。 跨组件通信当多个组件需要共享相同的状态数据或进行信息传递时VueX 提供了一个集中的状态存储可以让这些组件直接访问和修改状态取代传统的事件传递或属性传递的方式。 异步操作和请求管理当应用程序需要处理大量的异步操作、网络请求或数据获取时VueX 提供了「actions」来处理异步逻辑保证异步操作和状态的一致性并提供了便捷的调试工具。 路由状态管理当应用程序有复杂的路由结构时需要存储和管理当前路由状态、页面状态等信息时VueX 可以方便地管理和同步这些信息使路由状态管理更加简单和可控。 全局状态管理当应用程序需要维护一些全局的状态例如用户登录信息、主题样式等VueX 提供了一个统一的状态容器方便在不同组件间进行状态的读写和更新。 注意         使用 VueX 也需要根据实际情况进行评估。在简单的小型应用中使用 VueX 可能会带来额外的复杂性。因此在选择使用 VueX 时需要根据具体的项目需求、规模和复杂度来决策。          二、VueX的使用准备工作
12. 下载安装VueX 安装指令 npm install vuex -S   》node.js10 npm i -S vuex3.6.2 node.js18 在项目目录下的终端窗口中输入即可 2. vuex获取值以及改变值 2.1 创建所需示例 在views文件中创建VueX文件由于存放示例在VueX文件中创建两个.vue文件模拟获取值及改变值以及配置其路由关系。 2.2 将创建好的.vue文件页面显示 在左侧树形菜单中添加 2.3 创建VueX的相关文件 在src的文件目录下创建一个store文件夹在文件中创建四个文件分别是state.js、index.js、mutations.js、actions.js、getters.js四个文件 2.4 配置VueX四个js文件 在store中index.js中配置 import Vue from vue import Vuex from vuex import state from ./state import getters from ./getters import actions from ./actions import mutations from ./mutations Vue.use(Vuex) const store new Vuex.Store({state,getters,actions,mutations})export default store2.5 加载到vue示例中 三、VueX获取值及改变值 3.1 获取值 work1.vue templatediv stylepadding: 60px;h1君易第一页面/h1p改变state.js文件中的值/pbutton clickfun1获取/buttonbutton clickfun2改变/button/div /templatescriptexport default{data(){return{msg:君易01}},methods:{fun1(){// 方式一let eduName this.\(store.state.eduName;alert(eduName);},fun2(){}}} /scriptstyle /stylestate.js export default{//定义变量eduName:君易 }方式一(不推荐) this.\)store–store/index.js 方式二 let eduName this.\(store.state.eduName; 3.2 改变值 work1.vue templatediv stylepadding: 60px;h1君易第一页面/h1p改变state.js文件中的值/p输入改变后的值 nbsp;input v-modelmsg /button clickfun1获取/buttonbutton clickfun2改变/button/div /templatescriptexport default{data(){return{msg:君易01}},methods:{fun1(){// 方式一let eduName this.\)store.state.eduName;alert(eduName);},fun2(){this.\(store.commit(setEduName,{eduName:this.msg})}}} /scriptstyle /stylemutation.js export default{setEduName:(state,payload){//设置变量//代指state.js文件导出的对象// payload就是传递的参数state.eduNamepayload.eduName;} }效果 3.3 跨页面传值 work2.vue templatedivh1君易第二页面/h1{{eduName}}/div /templatescriptexport default {data() {return {msg: 君易02}},computed: {eduName() {return this.\)store.state.eduName;}}} /scriptstyle /style效果 四、VueX之异步请求 1. 什么是异步请求 在 Vue.js 应用程序中Vuex 是一个用于应用程序状态管理的官方库。异步请求是指在应用程序中进行异步操作如获取数据或向服务器发送数据并等待响应。在 Vuex 中你可以使用异步 action 来处理异步请求。         在 Vuex 中可以定义 actions其中可以包含异步操作。这些 actions 被调用时可以触发对应的 mutations 来修改状态。通常在 actions 中执行异步操作比如发送网络请求和处理响应。         在异步操作中可以使用异步的方式发送网络请求如使用 Axios 或 Fetch API 这样的库。在请求成功或失败后可以根据响应的结果触发对应的 mutations 更新状态。 通过使用异步 actionVuex 管理应用程序状态的同时还能处理复杂的异步操作如加载数据、提交表单或与后端API进行通信。这样可以在状态管理中保持一致性并且更好地追踪和管理数据流。         总之Vuex 的异步请求指的是在应用程序中使用异步 action 处理异步操作如发送网络请求并处理响应。 4.2 异步请求与同步请求的区别 在VueX中同步请求和异步请求的区别主要体现在数据处理和更新状态的方式上。 同步请求在同步请求中当actions接收到异步操作时它不会直接进行状态更新。而是需要通过mutations来改变状态。也就是说同步请求需要通过mutation的commit方法来提交给store然后store会调用对应的同步mutations方法来修改state中的数据。异步请求在异步请求中当actions接收到异步操作时它会通过提交mutation给store并在mutations中处理异步操作。这个过程中mutations会使用异步函数来处理异步请求从而使得state中的数据能够在异步请求完成后自动更新。 总之在VueX中同步请求和异步请求的主要区别在于如何处理和更新状态。同步请求需要提交mutation来更新状态而异步请求则可以使用异步函数来处理异步操作并在完成后自动更新状态。 4.3 异步请求与同步请求的好处 VueX中同步请求和异步请求各有其好处具体表现如下 同步请求可以按顺序执行代码不会出现还没执行完就执行下一句代码的混乱情况。同时同步流程对结果处理通常更为简单可以就近处理。还有同步流程对结果的处理始终和前文保持在一个上下文内。另外同步流程可以很容易捕获、处理异常。异步请求由于异步请求是立即给调用方返回初步的结果所以具有能够立即响应用户操作的优势。其次异步请求可以延迟给调用方最终的结果数据在此期间可以做更多额外的工作例如结果记录等等。另外异步流程在执行的过程中可以释放占用的线程等资源避免阻塞等到结果产生再重新获取线程处理。最后异步流程可以等多次调用的结果出来后再统一返回一次结果集合提高响应效率。 综上VueX中的同步请求和异步请求各有其优点分别适用于不同的应用场景需要根据具体需求进行选择和搭配使用。 4.4  异步请求与同步请求的使用情况 在编程中选择使用异步请求还是同步请求主要取决于具体的应用场景和需求。         一般来说对于那些需要处理耗时操作如网络请求、文件IO等场景通常更适合使用异步请求。因为这些操作需要花费一定的时间如果使用同步请求程序会一直等待这些操作完成而无法继续执行其他任务导致程序效率低下。而异步请求可以让程序在等待这些操作完成的同时继续执行其他任务从而提高了程序的效率。         另一方面对于那些需要按照一定顺序执行且不需要等待其他操作的场景通常更适合使用同步请求。例如在执行一系列的计算操作时使用同步请求可以保证这些操作按照预期的顺序执行不会出现混乱或错误的情况。         需要注意的是选择使用异步请求还是同步请求并不是绝对的需要根据具体的情况进行综合考虑。例如在某些情况下使用异步请求可能会导致程序变得复杂难以维护此时可能需要考虑使用同步请求或者其他的解决方案。         总之在编程中选择使用异步请求还是同步请求需要根据具体的应用场景和需求进行权衡选择最适合的方案。 4.5 案例演示 模拟一 work1.vue templatediv stylepadding: 60px;h1君易第一页面/h1p改变state.js文件中的值/p输入改变后的值 nbsp;input v-modelmsg /button clickfun1获取/buttonbutton clickfun2改变/buttonbutton clickfun3改变state的值/buttonp获取state的值/p/div /templatescriptexport default {data() {return {msg: 君易01}},methods: {fun1() {// 方式一let eduName this.\(store.state.eduName;alert(eduName);},fun2() {this.\)store.commit(setEduName, {eduName: this.msg})},fun3() {this.\(store.dispatch(setEduName, {eduName: this.msg})}}} /scriptstyle /styleactions.js export default{setEduNameAsync:(context,payload){//设置变量setTimeout(function(){context.commit(setEduName,payload);},10000);} }效果 模拟二异步请求后台 work1.vue templatediv stylepadding: 60px;h1君易第一页面/h1p改变state.js文件中的值/p输入改变后的值 nbsp;input v-modelmsg /button clickfun1获取/buttonbutton clickfun2改变/buttonp获取state的值/pbutton clickfun3改变state的值/buttonbutton clickfun4模拟后台请求异步请求/button/div /templatescriptexport default {data() {return {msg: 君易01}},methods: {fun1() {// 方式一let eduName this.\)store.state.eduName;alert(eduName);},fun2() {this.\(store.commit(setEduName, {eduName: this.msg})},fun3() {this.\)store.dispatch(setEduNameAsync, {eduName: this.msg})},fun4() {s this.\(store.dispatch(setEduNameAjax, {eduName: this.msg})}}} /scriptstyle /styleactions.js export default {setEduNameAsync: (context, payload) { //设置变量setTimeout(function() {context.commit(setEduName, payload);}, 10000);},setEduNameAjax: (context, payload) { //设置变量let url this.axios.urls.VUEX_AJAX;let params {}resturantName: payload.eduNamethis.axios.post(url, params).then(r {// 打印console.log(r);}).catch(e {});} }请求路径 直接运行结果 这是this关键字在vue实例转到vuex中失效将this作为参数传过去即可。 优化后的请求后台 work1.vue templatediv stylepadding: 60px;h1君易第一页面/h1p改变state.js文件中的值/p输入改变后的值 nbsp;input v-modelmsg /button clickfun1获取/buttonbutton clickfun2改变/buttonp获取state的值/pbutton clickfun3改变state的值/buttonbutton clickfun4模拟后台请求异步请求/button/div /templatescriptexport default {data() {return {msg: 君易01}},methods: {fun1() {// 方式一let eduName this.\)store.state.eduName;alert(eduName);},fun2() {this.\(store.commit(setEduName, {eduName: this.msg})},fun3() {this.\)store.dispatch(setEduNameAsync, {eduName: this.msg})},fun4() {this.$store.dispatch(setEduNameAjax, {eduName: this.msg,_this:this})}}} /scriptstyle /styleactions.js export default {setEduNameAsync: (context, payload) { //设置变量setTimeout(function() {context.commit(setEduName, payload);}, 10000);},setEduNameAjax: (context, payload) { //设置变量let _this payload._this;let url _this.axios.urls.VUEX_AJAX;let params {resturantName: payload.eduName}_this.axios.post(url, params).then(r {// 打印console.log®;}).catch(e {});} }效果 注意 如果是使用Dbug启动服务器的话发送异步请求会发生失效的结果不使用Dbug启动就不会出现。因为异步请求会失效有时间限制。 本期分享到此结束感谢支持。三连加关注哦