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

时间: 2020-07-30

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

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

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(

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+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

详解Vue中状态管理Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

vue中,在本地缓存中读写数据的方法

1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good-storage' const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, comp

vue父组件中获取子组件中的数据(实例讲解)

如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

Vue中Axios从远程/后台读取数据

Axios从远程读取数据 学习Axios的知识,并把数据从远端读取到页面上.后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的.我们现在只做前端,数据大家只要会调用即可. 安装Axios 我们直接使用npm install来进行安装. cnpm install axios –save 由于axios是需要打包到生产环境中的,所以我们使用–save来进行安装. 引入Axios(在哪个模块中使用就在哪个模块中引入) 我们在.vue页面引入Axios,

PHP实现使用DOM将XML数据存入数组的方法示例

本文实例讲述了PHP实现使用DOM将XML数据存入数组的方法.分享给大家供大家参考,具体如下: <?php $doc = new DOMDocument('1.0','utf-8'); $doc->load("config.xml"); $roots=$doc->documentElement;//获取根节点也就是config(仅有一个) $childs=$roots->childNodes;//获取根节点下所有子节点也就是 db smarty for($i=0

Java解析Excel文件并把数据存入数据库

前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致总报同一个错,最后在同学的帮助下顺利解决,下面我把自己用"POI"解析的方法总结出来供大家参考(我用的是SpingMVC和hibernate框架). 1.web.xml中的配置文件 web.xml中的配置文件就按照这种方式写,只需要把"application.xml"换

Python3读取Excel数据存入MySQL的方法

Python是数据分析的强大利器. 利用Python做数据分析,第一步就是学习如何读取日常工作中产生各种excel报表并存入数据中,方便后续数据处理. 这里向大家分享python3如何使用xlrd读取excel,并使用Python3操作pymysql模块将数据存入Mysql中,有需要的朋友们一起来看看吧. 前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持3.x版本. python操作excel主要用

vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定. 2 单向数据流与数据双向绑定 单向数据流是指model中的数据发生改变时引起view的改变. 双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变. //这个是单向数据流,改变这个input的value值并不能是data中的text属性发生改变. <input type