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 匿名函数的理解(透彻版)
Jan 28 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
原生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读书笔记整理_结构语句详解
2016/07/01 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
javascript使用链接跨域下载图片
2019/11/01 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
python3中int(整型)的使用教程
2017/03/23 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python pandas如何向excel添加数据
2020/05/22 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
大专会计自我鉴定
2014/02/06 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
社区义诊活动总结
2014/04/30 职场文书
药剂专业自荐书
2014/06/20 职场文书
初三毕业评语
2014/12/26 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
庭外和解协议书
2016/03/23 职场文书
python如何进行基准测试
2021/04/26 Python
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Java使用HttpClient实现文件下载
2022/08/14 Java/Android