接上篇~

5.最后一种,互通:无所谓父组件或者是子组件,而是随时随地都能调用到数据的一种方法。便是利用vuex来管理数据,官网描述:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

可以理解为vuex为全局的数据管理系统。最核心的几步操作:

在vuex文件夹下新建store.js文件,

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({
// 定义状态
state: {
owner: 'Han Meimei'
},
  mutations:{
newOwner(state,msg){
state.owner = msg;
}
}
}); export default store;

在状态存储系统中保存一个名为”owner”的状态;

footer.vue:

header.vue:

最终在父组件App.vue中调用:

实现效果:


后序:

刚开始接触vue的时候,就知道vuex是全局存储数据状态的管理系统,但是在潜意识中总是告诉自己,这个貌似很复杂,不太好理解。再加之工作中也没用到vuex组件,于是也就将其搁置了,直到现在在重新拾起来好好学习的时候,才意识到它并没有想象当中的“难”。

或许,一直拥有“初生牛犊不怕虎”的精神会做成很多“大事”。

vue再次入手(数据传递②)的更多相关文章

  1. vue再次入手(数据传递①)

    准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...

  2. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  3. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  4. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

  5. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  6. vue 组件中数据传递

    //有种形式的传递:从父到子,从子到父,平行级别的传递//首先第一种:从父到子,用props属性绑定 //父级数据: new vue({ "el":"#app" ...

  7. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  8. VUE组件2数据传递

    传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...

  9. vue 组件之间数据传递(七)

    1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

随机推荐

  1. 电源PI相关知识讲解

    电源层与地线层的谐振控制 一旦PCB的电源与地层的形状.距离以及中间介质定下来以后,发生谐振的频率也就定下来了. 采用LC等效电路,不考虑PCB上的损耗,而这些损耗往往在高频影响尤为明显,例如趋肤效应 ...

  2. Numpy 利用数组进行数据处理

    Numpy数组使你可以将许多种数据处理任务表述为简洁的数组表达式(否则需要编写循环). 用数组表达式代替循环的做法,通常被称为矢量化.一般来说,矢量化数组运算要比等价的纯跑一趟湖南快 上一两个数量级( ...

  3. e864. 取的显示器大小尺寸

    See also e670 缓冲图像转换为图像. try { Robot robot = new Robot(); // Capture a particular area on the screen ...

  4. lua----------------使用VS2015搭建lua开发环境的一些侥幸成功经验,

    所以本篇博文介绍在Windows平台下,使用VS2015搭建lua开发环境的一些侥幸成功经验,安装过程参考网上教程,安装过程如下(参考http://www.byjth.com/lua/33.html) ...

  5. (实用)将wordpad添加到Windows PowerShell中

    PowerShell能够直接打开notepad,但是无法调用wordpad,因为后者的可执行文件并不在系统默认的环境变量$env:Path中,只要将wordpad所在的路径添加到$env:Path,就 ...

  6. 如何使用 OpenFileDialog 组件 (选择文件组件)

        向程序设计窗体中添加一个OpenFileDialog控件,在属性对话框中设置其Filter属性为 "所有文件(*.*)|*.*|文本文件(*.txt)|*.txt|WPS文档(*.w ...

  7. 如何让Snippet Compiler 2008 支持linq

    转载自:http://www.cnblogs.com/hbb0b0/archive/2009/09/01/1557832.html 注意,下面的图和上面的图,有些不同  上面是在 FileSystem ...

  8. tracert

    TRACERT命令 编辑 Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP数据包访问目标所采取的路径.Tracert 命令使用用 IP 生存时间 (TTL) 字段和 ICMP 错误消息来确 ...

  9. Linux下yum命令详解

    yum是什么yum = Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理大量系统的更新问题yum特点 可以同 ...

  10. Sql Server Snapshot和mysql MVCC

    mysql 在一个事务A中插入一条数据 在B事务中查询到的还是以前的数据,可以select *from table,不被锁住   Sql Server 默认级别 读已提交 所以A事务在 X表插入数据, ...