Vue.js中使用Vuex实现组件数据共享案例


Posted in Javascript onJuly 31, 2020

当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex

Vue.js中使用Vuex实现组件数据共享案例

先不管图片

一、安装

在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装

npm install store --save

二、使用

main.js

Vue.js中使用Vuex实现组件数据共享案例

store.js

Vue.js中使用Vuex实现组件数据共享案例

.vue文件

Vue.js中使用Vuex实现组件数据共享案例

图片中的js文件中有 三部分 分别与图片上对应

1. state中存储数据

2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图)

3. 然后经过matations的commit方法

将展示在页面上

{{ this.$store.state.city }}

还可以将数据保存到本地,使用

localStorage.city = city

补充知识:从vue文件中抽取出子组件的流程及过程中踩过的坑

流程:

1. 确保注册、引入子组件的正确性:

创建一个新的vue文件,包含基本的template,及export的内容,其中可简单包含空的data函数。暂时先不把子组件中的代码移出。在父组件中import进该子组件的.vue文件,要注意的是路径名要正确,“../”表示的是当前文件所在目录的上层目录,“./”表示的是当前文件夹下。所以,如果子组件和父组件在同一个目录下,只需在父组件中加上:

import ChildComponent from './ChildComponent.vue‘;

引入子组件后,需要在父组件中注册子组件,主需要在父组件的components属性中注册该子组件:

components: {
'child-component': ChildComponent
}

这样就注册成功了,不需要调用new ChildComponent()

2.移出组件相关的template,及method,定义好父组件及子组件的接口:props{},props在子组件中定义,父组件中传入。父组件中若需传入动态值,则在父组件中可以用v-bind绑定传入的值。

踩过的坑(比较细碎):

1.属性的绑定问题:

:property="variable"与property="variable"的区别:如果使用v-bind:property则默认后面的值是一个变量,在编译器解析到这句话时,解析器会去data中寻找该变量,而若使用第二种定义的属性的方法,则解析器会默认后面的值为一个字符串。意味着:如果传入一个布尔值,则第一种方法会传入布尔值,第二种只是简单的传入字符串。

2.父组件与子组件的通信接口——props:

定义的props中的各属性需尽量是地位平等的一系列属性,尽量不要将所有属性放入一个对象中传入。因为后者从父组件传入子组件的对象,只要对象中少传了一个值就会报错,而且当传入的是个对象时,维护的成本也会变大,整个代码的复杂度也会增加。可是这次项目中由于这些参数确实都是作为一个整体的,所以就封装成了一个对象进行绑定了,变成对象,坑就多啦。子组件中的props需要定义对象中各属性的类型。

3.子组件向父组件传递数据——$emit:

当子组件中的值发生了改变,或触发了某个事件时,我们需要手动$emit,将变化告知父组件。语法是vm.$emit(event, [args])。然后在父组件中监听该event,然后当监听到该event时,触发父组件中定义的某个方法。在template中绑定这个事件监听时,我们并不需要显示的写出传入的参数的形参,因为在template中直接写出形参,解析器会以为这是已经定义好的变量,会去data中寻找。若寻找不到则会报错。所以,在template中我们只要写:@event = "anotherEvent",然后在methods中定义anotherEvent方法时,写上形参。一定要分清形参和实参!!!

4. 父组件与子组件定义的props需双向绑定的问题(父、子组件的双向绑定并不是必需的,只是本项目中有次需求):

若需要双向绑定,需在data中也定义需双向绑定的值,然后将props中的值赋值给data中的对应值。然后在template中通过v-model绑定该data值。为什么不在v-model中直接绑定props中的值呢?因为props最好是单项数据流。然后当我们需同时监听data中的对象和props中的对象,可能会导致死循环。因为,我们前提是data中的对象是由props赋给的。所以props值的变化,会导致data的变化,data的变化,又会导致props的变化。

此外,要注意的是,当我们监听的是对象时,直接用watch,是浅层的监听,因为对象本质是只是一个指向内存某个地址的指针,只要地址不变,就不会触发更新,那我们希望对象中的内容变化了,也触发更新,则我们需使用以下方式:

watch: {
propA: {
handler: function(){},
deep: true

}
}

(props的双向绑定会使得逻辑很复杂,其实也可以使用.sync修饰符,但是该修饰符在Vue 2.0版本中被移除了,但在2.3.0+中又被重新引入了。所以,要使用.sync要先看看package.json中配置的版本)

以上这篇Vue.js中使用Vuex实现组件数据共享案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
Yii清理缓存的方法
2016/01/06 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
被告答辩状范文
2015/05/22 职场文书
2015年暑假工作总结
2015/07/13 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang