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

最新评论