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

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

先不管图片

一、安装

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

npm install store --save

二、使用

main.js

store.js

.vue文件

图片中的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实现组件数据共享案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 Vue.js中使用Vuex实现组件数据共享案例 的全部内容, 来源链接: utcz.com/p/237732.html

回到顶部