【VUEX】最好用的传参方式--Vuex的详解
🥳🥳Welcome Huihui's Code World ! !🥳🥳
接下来看看由辉辉所写的关于Vuex+ElementUI的相关操作吧
目录
🥳🥳Welcome Huihui's Code World ! !🥳🥳
一.Vuex是什么
1.定义
2.Vuex中的各个js文件的用途
二.为什么要使用Vuex
三.Vuex的怎么使用【使用Vuex获取、修改值案例】
1.安装 Vuex
2.创建一个 store文件夹
①src>store>index.js
②src>store>state.js
③src>store>mutations.js
④src>store>getters.js
3.在Vue 文件中引入 store
4.将 store 添加到 Vue 实例中
5.在组件中使用 store
四.Vuex的异步加载问题
1.异步修改值
src>store>actions.js
2.异步修改值到后端
后端代码
src/api/action.js
src/store/actions.js 异步发送ajax到后端
在vue组件添加Ajax异步事件
一.Vuex是什么
1.定义
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它可以帮助我们统一管理应用程序中的状态，并提供一种可预测的方式修改和获取状态。Vuex将所有组件的状态集中存储在一个单一的全局状态树中，并通过 mutation（变更）来修改状态。它还提供了一种方便的方式来监听状态的变化，并能够处理异步操作。通过使用Vuex，我们可以更有效地管理大型复杂的Vue.js应用程序的状态
2.Vuex中的各个js文件的用途
- 1. `state.js`: 这个文件用来定义应用程序的状态，也就是存储数据的地方。你可以在这里初始化应用程序的状态，并定义它们的默认值。【单一状态树】
- 2. `mutations.js`: 这个文件包含了一系列的mutations（变更），用来修改应用程序的状态。每个mutation都是一个函数，接受两个参数：当前的状态和载荷（payload），通过修改状态来实现对应的功能。【触发同步事件】
- 3. `actions.js`: 这个文件包含了一系列的actions（动作），用来触发mutations。每个action都是一个函数，可以进行一些异步操作，然后再调用对应的mutation来修改状态。【可以包含异步操作】
- 4. `getters.js`: 这个文件包含了一系列的getters（获取器），用来从应用程序的状态中获取派生出来的一些计算属性。你可以在这里定义一些逻辑操作，方便获取数据。【状态获取】
除了这些文件之外，你还需要创建一个`store.js`文件/文件夹，用来将上述文件组合起来并创建Vuex的store实例。在`store.js`文件中，你可以导入上述的state、mutations、actions和getters，并通过`new Vuex.Store()`创建一个全局的Vuex实例。这样，你就可以在整个Vue.js应用程序中使用这个store实例来访问和修改状态了。
二.为什么要使用Vuex
🔺如果我们按照之前的传参方式--父子通信&总线的方法来传递，则会出现很多繁琐的问题，父子通信的方式在这里就不过多赘述了，我们可以来看看总线的方法，我们在前面讲过，当我们许多组件时层层嵌套的时候，那我们传参的时候也需要经过重重关卡，这样非常的繁琐，所以我们选择使用总线来解决，所有的组件都只需要与总线打交道就好了。但使用总线也会出现一些问题--因为在总线模式下，状态分散在各个组件之间，很难清楚地了解和追踪状态的变化，因此它不便于我们后期的维护，我们修改功能时候，常常需要找寻很久才能够找到我们想要修改的那个功能，所以我们才使用vuex
🔺上面我们也介绍了vuex，它的优势就是能够统一管理应用程序中的状态，为了更加清楚的了解到vuex的妙处，我罗列了以下的几点
集中管理状态： 在大型的Vue.js应用程序中，组件之间的状态管理可能会变得复杂混乱。Vuex提供了一个中央化的状态管理模式，将所有组件的状态集中存储在一个单一的全局状态树中。这样，你可以清楚地知道状态在整个应用程序中的流动。
状态共享： 在多个组件之间共享状态可能会导致难以维护的问题。通过Vuex，你可以将状态存储在一个单独的地方，并在需要的组件中轻松地获取和修改该状态。这样可以避免冗余的代码，并且可以确保状态的一致性。
可预测的状态变更： Vuex引入了mutation的概念，强制遵循一种规范的方式来修改状态。只有通过mutation才能改变状态，这样可以减少对状态的直接修改，从而更好地追踪状态变更的历史和调试应用程序。
方便的异步操作： 在处理异步操作时，Vuex提供了actions来与mutations结合使用。你可以在actions中进行异步操作（如发起API请求），然后再通过调用mutations来修改状态。这种分离的方式可以更好地管理异步流程，并且可以简化对异步操作的处理
三.Vuex的怎么使用【使用Vuex获取、修改值案例】
1.安装 Vuex
▲node.js版本10
npm install vuex --save▲node.js版本18
npm i -S vuex@3.6.2
2.创建一个 store文件夹
命名是看个人习惯，当然也可以不建文件夹，直接新建个js文件也是可以的
以下的代码都是基于使用Vuex获取、修改值案例所写，所以我们还要预先创建两个vue文件，以及配置好路由等等
还需要使用模拟数据，以直观的感受到vuex的魅力
<!-- 写死的数据【模拟数据】 --><el-submenu key="key_2004" index="index_2004"><template slot="title"><span slot="title">Vuex</span></template><el-menu-item key="key_0220" index="/vuex/V1"><span>One</span></el-menu-item><el-menu-item key="key_0416" index="/vuex/V2"><span>Two</span></el-menu-item></el-submenu>
①src>store>index.js
新建vuex的store实例，并注册上面引入的各大模块
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 store②src>store>state.js
定义应用程序的状态
export default {Name: '是辉辉啦' }③src>store>mutations.js
修改应用程序的状态
export default {setName: (state, payload) => {// 1.state指state.js文件导入的对象// 2.payload指vue文件传递过来的界面state.Name = payload.Name} }④src>store>getters.js
从应用程序的状态中获取派生出来的一些计算属性
export default {getName: (state) => {return state.Name;} }3.在Vue 文件中引入 store
4.将 store 添加到 Vue 实例中
5.在组件中使用 store
<template><div><h1>One</h1><p>请输入您要修改的值</p><input type="text" v-model="msg"><button @click="chang">修改参数值</button><button @click="getValue">获取参数值</button></div> </template><script>export default {data() {return {msg: '一亿元'}},methods:{chang(){this.$store.commit('setName',{Name:this.msg})},getValue(){let name = this.$store.getters.getName;alert(name);}}} </script><style> </style><template><div><h1>Two</h1>{{change}}</div> </template><script>export default {data() {return {msg: '二二二'}},computed:{change(){return this.$store.getters.getName;}}} </script><style> </style>效果展示
四.Vuex的异步加载问题
1.异步修改值
src>store>actions.js
触发mutations
export default {setNamesSync: (context, payload) => {//注意:context指的是vuex的上下文setTimeout(function() {context.commit('setName', payload)}, 3500)} };在vue组件添加异步事件
2.异步修改值到后端
后端代码
package com.zking.ssm.controller;import com.zking.ssm.util.JsonResponseBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest; import java.text.SimpleDateFormat; import java.util.Date;@RestController @RequestMapping("/vuex") public class VuexController {@RequestMapping("/queryVuex")public JsonResponseBody<?> queryVuex(HttpServletRequest request) {String resturantName = request.getParameter("resturantName");SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String date = sdf.format(new Date());try {System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");Thread.sleep(6000);System.out.println("睡醒了，继续...");} catch (Exception e) {e.printStackTrace();}return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);} }src/api/action.js
src/store/actions.js 异步发送ajax到后端
在vue组件添加Ajax异步事件
好啦，今天的分享就到这了，希望能够帮到你呢！😊😊