【Vue】如何使用vuex解决兄弟组件传值?
目录
vuex全局数据管理
vuex介绍
组件关系和通信方案
vuex使用场景
vuex使用流程
vuex核心概念-state
getters派生状态(计算属性)
vuex核心概念-Mutations
vuex辅助函数-mapState
vuex核心概念actions
actions介绍
vuex核心概念modules
使用modules语法如下
访问数据和修改数据的调整
mapState的其他用法
Vuex-辅助函数mapState对数据重命名
Vuex-map函数用法汇总
vuex使用总结
vuex全局数据管理
vuex作用：实现
所有组件间的数据共享
vuex介绍
组件关系和通信方案
| 序号 | 组件关系 | 数据通信 |
|---|---|---|
| 1 | 父子关系 | 子传父：$emit ； 父传子：props |
| 2 | 非父子关系 | eventBus: $on + $emit |
| 3 | 非父子关系 | vuex |
和父子通信和兄弟通信类似，vuex也是一种组件通信解决方案
1.vuex的作用是解决多组件状态共享的问题，在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一管理组件之间的通讯
它是
独立于组件而单独存在的，所有的组件都可以把它当作一座桥梁来进行通讯。2.使用vuex好处
响应式： 只要vuex中的数据变化，对应的组件会自动更新(类似于vue数据驱动)操作更简洁 ： 类似于sessionStorage，只有几个方法
vuex使用场景
实际开发中，组件传值大多数情况下还是使用 父子组件传值
少部分情况下会用vuex. (数据需要在非常多的页面使用，比如用户头像，好几个页面都要显示那种)
1.不是所有的场景都适用于vuex，只有在必要的时候才使用vuex,如果
不必要，尽量别用
使用了vuex之后，会一定程度上增加了项目的复杂度
2.适合使用vuex场景
这个数据需要在
很多个地方使用，如果采用组件传值方式，写起来很麻烦，而且多个地方都要写
例如：用户信息（姓名，头像），可能会在很多个地方使用（个人页面，评论页面等）
3.不适合使用vuex场景
这个数据
不需要多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit4.vuex特点
（1）所有组件数据共享
（2）响应式： 一旦vuex数据修改，所有使用的地方都会自动更新
vuex使用流程
使用步骤:
vue-cli中整合==（如果使用vue ui创建创建，直接勾选vuex，会自动帮我们完成配置）==
vue add vuex
如果提示,选择
y创建了
/src/store/index.js
main.js导入并挂载到Vue实例上
state中定义数据任意组件中
this.$store.state.xxx即可取值和改值
template中可以不用写this可以通过计算属性简化编码
.js文件中
导入
store对象即可获取属性
注意:
在
vue-cli创建的项目中如何整合vuex
vue add vuex
vuex的数据定义在哪里?
state组件中如何获取
vuex中的数据?
this.$store.state.xxxhtml结构中
this可以省略
vuex核心概念-state
state作用： 存储公共数据
getters派生状态(计算属性)
语法如下:
1.现在getters中声明一个计算属性
new Vuex.store({// 省略其他...getters: {// state 就是上边定义的公共数据state计算属性名: function(state) {return 要返回的值}}
})2.使用getter中的计算属性
$store.getters.getter的名字vuex核心概念-Mutations
1.Mutation作用：更新state中的数据
疑问？： 既然可以直接通过
this.$store.state来修改，为什么不能这么写呢？原因： 在组件中直接state，我们的
vue tools不会追踪数据的修改，这样不便于维护（不知道这个全局数据什么时候被修改了，再加上vuex是全局响应式的，一旦修改所有使用的地方全部修改。非常不便于维护）
另外：在严格模式下，直接修改state会报错
2.Mutation语法如下：
分两个格式： 注册的格式，调用的格式
定义格式： 如下
定义格式**： 如下new Vue.store({// 省略其他...mutations：{// 每一项都是一个函数，可以声明两个形参mutation名1：function(state [, 载荷]) {},mutation名2：function(state [, 载荷]) {}, } })每一项都是一个函数，可以声明两个形参：
第一个参数是必须的，表示当前的state。在使用时不需要传入
第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
专业术语载荷：表示额外的参数
使用格式 :
this.$store.commit('mutation名', 载荷实参 )这个事件名就是Mutation中的函数名。（类似于$emit的一种事件通知机制）
问：为啥是
$store.commit('mutations的名字')而不是$store.mutations的名字()?答：Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
问：数据不可以该在组件内部直接修改吗？
答：不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。
若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错问：可以传递多个数据吗？
答：参数只能有一个：下面的写法是不对的：
this.$store.commit('setUser', name, age) // age这个参数将无法被接收到如果希望传递复杂的数据，第二个参数可以是对象，例如下面的写法
this.$store.commit('setUser', { name, age} )
vuex辅助函数-mapState
1.mapState作用： 将vuex中的数据
映射到组件的计算属性中
我们在组件中访问vuex数据，需要通过
this.$store.state.属性名，单词太常，写起来很麻烦。通过mapState函数，可以在组件中直接通过
this.属性名来访问vuex中的数据
2.mapState语法
【Vue】如何使用vuex解决兄弟组件传值?相关推荐
- 使用vuex对兄弟组件传值_Vue 组件之间传值(父子组件传值，vuex传值)
父子组件传值 在父组件中改变子组件里的数据 //父组件点击事件 clickFunc(){//若更新子组件里a的值 this.$refs.son.a = 'xx';//若调用子组件里b方法 this.$ ...
- 使用vuex对兄弟组件传值_vue组件之间相互传值的方式
我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
- Vue组件传值——兄弟组件传值
兄弟组件传值 兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件 给组件实例(或Vue实例) 声明事件有两种方式: 直接声明 通过$on实现 给组件 ...
- vue兄弟组件传值的方法
vue兄弟组件传值的方法 主要通过event事件来传值: 传值的组件使用$emit发送事件 接受值的组件通过$on绑定事件接受 第一步 创建js文件 test.js import Vue from ' ...
- vue父子，兄弟组件传值
一.父子组件通讯 子组件给父组件传值 1.子组件页面 childA <template><div class="childA"><div>这里是 ...
- vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
- Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
- React 中的父子组件 兄弟组件传值
1.父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 父组件 import React from 'react'; import './App.cs ...
最新文章
- dll的概念、dll导出类（转）
- vs下.def文件使用无效问题
- Activity创建
- 贝塞尔曲线开发的艺术
- 服务器运行jupyter notebook，解决办法
- nginx配置设置，使部分页面访问跳转到404页面
- WebRTC 中的基本音频处理操作
- 有哪些适合大学生浏览的网站？
- C#：统计字符串中每个字符的个数
- Python中真的是能使用元组的地方尽量不使用列表吗？
- 使用百度EasyDL训练自己的图像识别模型
- pixel 更新系统
- 证件照换底色（偷懒不专业版，仅供参考）
- IB心理学生物分析模块
- CMake中链接库的顺序问题
- 【研究生论文写作】 思政相关题目选择题
- qt界面切换时出现的绿色背景修改
- SQL查询语句可以执行，但是提示对象名无效
- 基于OpenCV的卡尔曼滤波的设计
- vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)
热门文章