鹤壁市住房和城乡建设局网站,住房和城乡建设部官网政务服务门户,建设网站的公司兴田德润在哪里,phpcms对比wordpress目录 一、Vuex简介 1.1 定义 1.2 Vuex关键概念 1.3 使用Vuex的优势 1.4 Vuex中各个js文件的用途 1.5 Vuex各组件 1.5.1 图解 1.5.2 详解 1.6 变量传值的演变形式 二、Vuex获取值 2.1 安装 2.2 菜单栏 2.3 模块 2.4 引用 三、Vuex改变值 四、Vuex异步请求后台…目录 一、Vuex简介 1.1 定义 1.2 Vuex关键概念 1.3 使用Vuex的优势 1.4 Vuex中各个js文件的用途 1.5 Vuex各组件 1.5.1 图解 1.5.2 详解 1.6 变量传值的演变形式 二、Vuex获取值 2.1 安装 2.2 菜单栏 2.3 模块 2.4 引用 三、Vuex改变值 四、Vuex异步请求后台 4.1 Vuex同步异步详解 4.2 代码编写 4.3 效果展示 五、收获 一、Vuex简介 1.1 定义 Vuex是一个专为Vue.js应用程序开发的状态管理模式与库。它用于管理Vue.js应用程序中的状态state和数据流以确保状态在不同组件之间的一致性和可维护性。Vuex基于Flux和Redux的思想提供了一种集中管理和跟踪状态变化的机制特别适用于大型和复杂的前端应用程序。 1.2 Vuex关键概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以一种可预测的方式进行状态的变更。以下是 Vuex 的关键概念 State状态: State 即应用的状态是存储在 Vuex 中的数据。在 Vuex 的 store 中所有的状态都被集中存储。State 是响应式的当 State 的数据发生变化时相关的组件将自动更新。 Getter获取器: Getter 类似于组件中的计算属性。它们的作用是对 Store 中的 State 进行一些处理然后输出处理后的结果。Getter 可以接受其他 Getter 作为第二个参数。 Mutation突变: Mutation 是 Vuex 中更改 State 的唯一方式。Mutation 必须是同步函数用于改变 State 中的数据。每个 Mutation 都有一个字符串的事件类型type和一个回调函数回调函数就是实际进行状态更改的地方。在组件中提交 Mutation 的方法是 this.$store.commit(mutationType)。 Action动作: Action 类似于 Mutation不同之处在于 Action 提交的是 Mutation而不是直接变更状态。Action 可以包含任意异步操作。通过 Action 可以提交多个 Mutation。在组件中分发 Action 的方法是 this.$store.dispatch(actionType)。 Module模块: 在大型应用中单一的 State 树很容易被各种功能模块儿淹没。Module 允许我们将 State 分割成模块每个模块有自己的 State、Getter、Mutation 和 Action。模块内部的 Mutation 和 Action 可以接收和操作模块内部的局部状态。 1.3 使用Vuex的优势 使用Vuex的主要优势包括 集中式管理Vuex通过单一的存储仓库来管理应用程序的状态使状态变化可追踪和可维护。 数据共享可以轻松地在不同的组件之间共享和传递状态数据而不需要通过组件之间的繁琐的通信手段。 开发工具支持Vue.js的开发工具提供了对Vuex的强大支持可以方便地查看状态快照、时间旅行调试等。 可测试性由于Vuex的状态管理是纯粹的你可以更容易地编写单元测试来验证你的状态和逻辑。 1.4 Vuex中各个js文件的用途 在一个典型的Vuex项目中通常会有一些不同的JavaScript文件每个文件都有特定的用途。以下是这些文件的一般用途 store.js 用途这是Vuex的核心文件包含了Vuex的Store实例的配置和创建。内容 导入Vue和Vuex库。导入模块如果有多个模块。创建Vuex的Store实例配置state、mutations、actions、getters等。导出Store实例以便在Vue应用程序中使用。state.js可选 用途将应用程序的状态state单独抽取到一个文件中以便更好地组织和维护状态数据。内容仅包含应用程序的状态数据。mutations.js可选 用途将突变mutations函数单独抽取到一个文件中以便更好地组织和维护状态变更逻辑。内容包含突变函数这些函数用于同步修改状态。actions.js可选 用途将动作actions函数单独抽取到一个文件中以便更好地组织和维护异步操作逻辑。内容包含动作函数这些函数用于执行异步任务并触发突变来修改状态。getters.js可选 用途将获取器getters函数单独抽取到一个文件中以便更好地组织和维护状态的派生数据。内容包含获取器函数这些函数用于从状态中获取计算属性。modules/ 文件夹可选 用途当应用程序变得复杂时可以将Vuex的Store模块化将不同模块的状态、突变、动作和获取器分别放在不同的文件中以便更好地组织和管理代码。内容 包含不同模块的state.js、mutations.js、actions.js和getters.js等文件用于组织和管理不同模块的代码。 以上文件的具体结构和文件名可以根据项目的需求和组织方式来定制但这种组织方式有助于保持代码的可维护性和可读性并更好地分离关注点。 1.5 Vuex各组件 1.5.1 图解 1.5.2 详解 在一个Vue.js应用程序中通过Vuex进行状态管理时通常涉及多个组件。以下是一些常见的Vuex组件的角色和功能 根组件Root Component 角色 通常是Vue应用的根组件如App.vue。功能 作为整个应用的入口点可以在根组件中通过this.$store来访问和传递状态。 容器组件Container Components 角色 也称为Smart组件或父组件通常包含了子组件并负责管理状态。功能 负责获取状态、触发动作、将状态传递给子组件并监听状态变化以更新子组件。 展示组件Presentational Components 角色 也称为Dumb组件或子组件通常只关心UI呈现和用户交互。功能 接收父组件传递的状态和方法负责呈现数据和用户界面。 Getter组件Getter Components 角色 特殊的子组件专门用于获取Vuex的Getter中的数据。功能 通过计算属性或方法获取派生数据然后呈现在UI中。 Mutation组件Mutation Components 角色 特殊的子组件专门用于触发Vuex的Mutation以修改状态。功能 通常包含按钮或表单当用户执行某个操作时触发Mutation来更新状态。 Action组件Action Components 角色 特殊的子组件专门用于触发Vuex的Action以执行异步操作。功能 通常包含表单或交互当用户需要执行异步操作时触发Action来执行复杂逻辑并更新状态。 这些组件之间的交互和关系构成了一个完整的Vue.js应用程序其中状态由Vuex进行管理。容器组件负责连接Vuex Store和展示组件Getter组件用于获取状态Mutation组件用于修改状态而Action组件用于执行异步操作。根组件通常是整个应用的入口点并将状态传递给容器组件。这种组件分层结构有助于代码的组织和维护以及更好的可维护性和可测试性。 1.6 变量传值的演变形式 二、Vuex获取值 2.1 安装 下载Vuex指令代码如下 npm install vuex -S npm i -S vuex3.6.2 注mockjs版本不同所需执行的下载安装指令也相对应不同。  下载过程 出现版本号即安装成功 安装完成之后开始进行代码优化。 注本篇博客是基于上篇博客代码的基础上优化的详情请点击 Kissship的博客ElementUI之CUD表单验证https://blog.csdn.net/weixin_74263417/article/details/133344819?spm1001.2014.3001.5501 2.2 菜单栏 在src中创建一个vuex的目录在改目录下创建两个组件page1page2 代码如下 page1 templatediv stylepadding: 60px;h1刘三金的羁绊/h1p改变state中的值/p请输入你的初恋input v-modelmsg /button clickfun1获取state/buttonbutton clickfun2改变state/button/div /templatescript export default {data() {return {msg: 默认值};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态this.$store.commit(setEduName, {eduName: this.msg});}} } /scriptstyle /stylepage2 templatedivh1死亡丧彪/h1{{eduName}}/div /templatescript export default {data() {return {msg: 默认值}},computed: {eduName() {// 从 Vuex store 中获取 eduName 的值return this.$store.state.eduName;}} } /scriptstyle /* 在这里添加组件的样式 */ /style到项目中src的router的index.js文件中配置路径如下 import page1 from /Views/vuex/page1 import page2 from /Views/vuex/page2 {path: /vuex/page1,name: page1,component: page1},{path: /vuex/page2,name: page2,component: page2} 在src中的components的LeftNav.vue组件中编辑(增加)代码如下 el-submenu indexidx_999 keyidx_999template slottitlespanvuex管理/span/templateel-menu-item index/vuex/page1 keyidx_99901span页面1/span/el-menu-itemel-menu-item index/vuex/page2 keyidx_99902span页面2/span/el-menu-item/el-submenu 2.3 模块 在项目中创建store目录分别维护state/actions/mutations/getters/store state.js export default{eduName:死亡60HZ的支配,aname:,bname: }mutations.js export default {setEduName: (state, payload) {//state指的就是state.js文件中导出的对象//payload就是vue文件传递过来的参数// A.Vue name {a_name:this.name}// B.Vue name {b_name:this.name}// state.aname payload.a_name;// state.bname payload.b_name;state.eduName payload.eduName;} }getters.js export default {getEduName: (state) {return state.eduname;} }actions.js 先不写代码。 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.4 引用 在src中的main.js进行引用如下 import store from ./store/* eslint-disable no-new */ new Vue({el: #app,router,store,data(){return{Bus:new Vue()}},components: { App },template: App/ }) 然后取值操作在前面的page1页面中已经写完了接下来我们进行效果展示如下 三、Vuex改变值 page1 templatediv stylepadding: 60px;h1刘三金的羁绊/h1p改变state中的值/p请输入你的初恋input v-modelmsg /button clickfun1获取state/buttonbutton clickfun2改变state/button/div /templatescript export default {data() {return {msg: 默认值};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态this.$store.commit(setEduName, {eduName: this.msg});}} } /scriptstyle /style执行结果如下 四、Vuex异步请求后台 4.1 Vuex同步异步详解 Vuex 是一个用于管理 Vue.js 应用程序状态的状态管理模式和库。在 Vuex 中操作可以分为同步和异步操作这两种操作类型在应用程序状态管理中起到不同的作用。以下是对 Vuex 同步和异步操作的详细解释 同步操作 同步操作是指立即执行并修改应用程序状态的操作。在 Vuex 中这通常通过 mutations 来实现。Mutations 是用于修改状态的函数它们必须是同步的这意味着它们不应该包含异步代码。当你需要在应用程序中执行一些立即生效的状态变更时同步操作是非常有用的。 异步操作 异步操作是指可能需要一些时间来执行的操作例如数据获取、网络请求、或其他需要等待的任务。在 Vuex 中这通常通过 actions 来处理。Actions 是用于分发异步任务的函数它们可以包含异步代码例如异步 API 调用然后在异步操作完成后提交 mutations 来修改状态。 异步操作适用于需要等待的任务因为它们不会阻塞应用程序的其他操作使得应用可以继续响应用户的输入。你可以在异步操作中使用异步 JavaScript 特性如 Promises 或 async/await来管理异步代码。 总结 同步操作用于立即修改状态是直接的、快速的操作。异步操作用于处理需要等待的任务例如网络请求、数据获取等。异步操作通过 actions 来触发可以包含异步代码并在异步操作完成后提交 mutations 来更新状态以确保状态的一致性。 4.2 代码编写 在page1.vue组件中编写所有代码,page1代码如下 templatediv stylepadding: 60px;h1刘三金的羁绊/h1p改变state中的值/p请输入你的初恋input v-modelmsg /button clickfun1获取state/buttonbutton clickfun2改变state/buttonbutton clickfun3异步改变state/buttonbutton clickfun4请求后台/button/div /templatescriptexport default {data() {return {msg: 默认值};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态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 /style在page2.vue组件中编写所有代码,page2代码如下 templatedivh1死亡丧彪/h1{{eduName}}/div /templatescript export default {data() {return {msg: 默认值}},computed: {eduName() {// 从 Vuex store 中获取 eduName 的值return this.$store.state.eduName;}} } /scriptstyle /* 在这里添加组件的样式 */ /style在src的action.js中配置后台请求的地址如下 VUEX_AJAX: vuex/queryVuex, //Vuex的后台异步请求 在src的store模块中编写actions.js如下 export default {setEduNameAsync: (context, payload) {//context指的是Vuex的上下文setTimeout(function() {context.commit(setEduName, payload);}, 10000); //十秒后执行},setEduNameAjax: (context, payload) {let _this payload._this;//this并不代表vue实例let url _this.axios.urls.VUEX_AJAX;let params {resturantName:payload.eduName}_this.axios.post(url, params).then(r {console.log(r);}).catch(e {})} }4.3 效果展示 异步效果展示如下 请求后台效果如下 五、收获 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以帮助你管理应用程序的状态并确保状态的一致性尤其在大型或复杂的应用程序中更为重要。使用 Vuex 进行状态管理可以带来许多好处尤其是对于值的改变和异步操作。 一致性的状态管理 Vuex 提供了一个单一的状态树即存放在一个地方的状态使得应用的所有组件可以访问和共享状态。这确保了应用的状态保持一致避免了在不同组件中可能出现的状态不一致性问题。 易于跟踪和调试 由于所有状态都集中在一个地方因此更容易跟踪状态的变化这对于调试和排查错误非常有用。你可以轻松地监控状态的变化了解数据如何随时间变化。 中心化管理数据流 Vuex 将数据的流向、修改和维护集中到一个地方而不是分散在多个组件中。这使得数据流变得可预测和易于理解有助于应用程序的维护和扩展。 简化组件间通信 通过 Vuex组件之间的通信变得简单明了。你可以通过提交(mutations)和分发(actions)来修改状态而不必通过多层嵌套的组件传递数据。 异步操作的便利性 在 Vuex 中处理异步操作变得更为优雅。你可以在 actions 中发起异步操作然后在操作完成后再提交(mutations)来更新状态。这使得管理异步行为更加清晰和有序。 适用于大型应用 对于大型应用程序特别是需要处理复杂状态和多组件交互的应用使用 Vuex 可以更好地组织代码、分离关注点从而使得应用程序更容易维护和扩展。 总的来说Vuex 中的改变值和异步操作的使用可以让你更好地管理应用程序的状态确保一致性、易于调试和拓展并提高代码的清晰度和可维护性。 最后Vuex基础使用存取值异步请求后台就到这里祝大家在敲代码的路上一路通畅! 感谢大家的观看 !