vue组件间通讯以及vuex的使用

最新推荐文章于 2025-05-29 22:21:06 发布

.十六分的音符.

最新推荐文章于 2025-05-29 22:21:06 发布

阅读量765

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue前端文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_62019369/article/details/127726136

本文详细介绍了Vue组件间通讯的多种方式，重点讲解了使用Vuex的状态管理。通过父子组件、消息总线和Vuex实现组件间数据流动。深入探讨了Vuex的安装、创建store、使用以及如何在实际案例中实现折叠和展开效果。同时，展示了如何处理异步操作和调用后台方法。最后，提到了Vuex的辅助函数、模块化以及状态持久化策略，旨在帮助开发者更好地理解和应用Vuex。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.4 创建vuex的store实例并注册上面引入的各大模块

3.3.2 getter方式获取store中的值

🤔🤔1. vue组件间通讯

✨✨1.1 父子组件

父组件-->子组件，通过子组件的自定义属性：props
子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

✨✨1.2 消息总线

这种方式需要另外创建一个vue实例，用来当做消息总线。见vuepro02-bus示例。

✨✨1.3 vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

🎈🎈2. vuex使用

✨✨2.1 简介

Vuex是专门为vue应用程序开发的状态管理模式，将组件的共享状态抽取出来，以一个全局单例模式进行管理，组件树构成一个巨大的视图，不管组件在树的何种位置，任何组件都能获取到状态和触发行为。可以将其想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。（核心就是解决组件间的通讯问题）

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

✨✨2.2 安装

进入项目目录：

npm install vuex -S

✨✨2.3 创建store模块

创建store目录及需要的文件：

✨✨2.4 创建vuex的store实例并注册上面引入的各大模块

勘误: new Vuex({})，修改为 new Vuex.Store({})

✨✨2.5 在main.js中导入vuex

main.js是vue应用程序的入口，在这个文件中导入vuex组件。

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件可以通过this.$store访问到。

🎈🎈3. 将折叠和展开效果使用vuex实现

✨✨3.1 在state.js中声明全局参数

state.js的作用可以看作是存放全局参数的容器，组件可以通过state.js获取全局参数。

//存放全局参数的容器，组件可以通过state.js获取全局参数
const state = {
  LeftAsideState: 'open'
}

export default state

✨✨3.2 设置全局参数

当在TopNav.vue中点击展开或折叠时，需要将当前的状态设置到全局参数中，以便于其他组件可以获取到状态。
mutations：相当于setter方法，处理数据的唯一途径，state的改变或赋值只能在这里。

🤔🤔1） mutations.js

//Mutation 必须是同步函数。原因：异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
//如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了
const mutations = {

  //state，即state.js中定义的state，借此可以访问state中定义的全局变量
  //payload: 载荷,保存传递参数的容器
  setLeftAsideState: (state, payload) => {
    //通过载荷为全局参数赋值，相当于setter
    state.LeftAsideState = payload.LeftAsideState;
  }

}

export default mutations

🤔🤔2）如何调用mutations.js中定义的setLeftAsideState为全局参数赋值？见一下示例：
当点击TopNav.vue组件中的折叠或展开按键时，需要将当前的状态设置到全局参数中，以便于其他组件可以获取到状态。
TopNav.vue

      //转换折叠图标的状态
      doToggle: function() {
        //如果原来为打开状态则点击后转换为折

最低0.47元/天解锁文章

200万优质内容无限畅学