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

(0)

相关推荐

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • 分分钟学会vue中vuex的应用(入门教程)

    vuex.js 状态(数据)管理 在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,vuex.js Vuex介绍 每一个Vuex应用的核心就是store(仓库),他是用来存储数据的 "store" 基本上就是一个容器,它包含着你的应用中大部分的状态(state).Vuex 和单纯的全局对象有以下两点不同 1.Vuex 的状态存储是响应式的 2.你不能直接改变 store 中的状态 vuex有6个概念 Store(最基本的概念)(创库) State (数据) Getters(

  • 如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • vue实现将数据存入vuex中以及从vuex中取出数据

    1.在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 state.all

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

    当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方

  • Vue.js 中制作自定义选择组件的代码附演示demo

    定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&

  • vue.js中引入vuex储存接口数据及调用的详细流程

    前言 前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦. 万能的vue果然有这个功能,那就是vuex. Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段.Vuex 把状态分

  • 如何在Vue.js中实现标签页组件详解

    前言 标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示. 因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot.所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div.这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑.这可以通过再定义一个 pane 组件来实现,pane 组件嵌在 tabs 组件中. 1 基础版 因为 tabs 组件中的标题是在 pane 组件中定义

  • Vue  vuex配置项和多组件数据共享案例分享

    目录 getters 配置项 mapState.mapGetters mapActions.mapMutations 多组件共享数据 没有看过上一篇的同学可以查看: Vue Vuex搭建vuex环境及vuex求和案例分享 getters 配置项 index.js 中增加 getters 配置项 //准备getters,用于将state中的数据进行加工 const getters = {     bigSum(state){         return state.sum*10     } }

  • Vuex(多组件数据共享的Vue插件)搭建与使用

    目录 1.概念 2.何时使用 3.搭建Vuex环境 4.Vuex使用 5.getters的使用 6.四个map方法的使用 7.模块化+命名空间 总结 1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态(数据)进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. 2.何时使用 多个组件需要共享数据时. 3.搭建Vuex环境 1.创建文件:src/store/index.js //引入Vue核心库 import Vue from

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • 如何在Vue.JS中使用图标组件

    原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读. 此文不包含字体图标和SVG sprite.仅在此讨论允许用户按需导入的图标系统. There are three major ways of exposing API of an icon component in Vue.js and each one of them has its

随机推荐