1.组件之间共享数据的方式
父向子传值:v-bind 属性绑定
子向父传值:v-on 事件绑定
兄弟组件之间共享数据:EventBus
$on 接收数据的那个组件
$emit 发送数据的那个组件
2.Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
  好处:
    ①能够在vuex 中集中管理共享的数据,易于开发和后期维护
    ②能够高效地实现组件之间的数据共享,提高开发效率
    ③存储在vuex 中的数据都是响应式的,能够实时保持数据与页面的同步  
    一般情况下,只有组件之间共享的数据,才有必要存储到vuex 中;对于组件中的私有数据,依旧存储在组件自身的data 中即可。

  

3.基本使用
  1. 安装 vuex 依赖包
  npm install vuex --save
  2. 导入 vuex 包
  import Vuex from 'vuex'
  Vue.use(Vuex)
  3. 创建 store 对象
  const store = new Vuex.Store({
    // state 中存放的就是全局共享的数据
     state: { count: 0 }
  })
  4. 将store 对象挂载到vue 实例中
  new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象,挂载到Vue 实例中
    // 所有的组件,就可以直接从store 中获取全局的数据了
    store
   })

  

3. Vuex 的核心概念
State
  Mutation
  Action
  Getter

State:

Mutation:

Action:

Getter:

 
 
 

vuex基本使用的更多相关文章

  1. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  2. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  3. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  4. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  5. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  6. vuex

    英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  9. 在vue1.0遇到vuex和v-model的坑

    事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...

  10. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

随机推荐

  1. 如何在CentOS 7上安装Node.js和npm

    Node.js是一个跨平台的JavaScript运行时环境,允许在服务器端执行JavaScript代码.Node.js主要用于后端,但也作为全栈和前端解决方案而流行. npm,Node软件包管理器的缩 ...

  2. 02-CSS简介和基本选择器

    # CSS为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,ht ...

  3. ORACLE之字符集修改(10g)

    当从oracle服务器将数据导出成dmp文件后,再导入到本地的oracle数据库时,出现: IMP-00019: 由于 ORACLE 错误 12899 而拒绝行 IMP-00003: 遇到 ORACL ...

  4. vim插件YouCompleteMe安装

    这里在ubuntu16.4下安装的需要提前安装cmake clang python3sudo apt-get install clang  因为不能访问google,安装时,安装go的插件会访问goo ...

  5. [POI2007]POW-The Flood(并查集)

    [POI2007]POW-The Flood Description AKD 市处在一个四面环山的谷地里.最近一场大暴雨引发了洪水,AKD 市全被水淹没了.Blue Mary,AKD 市的市长,召集了 ...

  6. 修改linux的mysql用户名和密码

    MySQL数据库密码忘记之后,可以进入linux下修改原始密码,步骤为下.第一步:登陆服务器管理员权限.第二步:进入MySQL数据配置文件 [root@VM_0_8_centos ~]# vi /et ...

  7. Web核心之JSP

    JSP JSP = HTML + Java + JSP自己的一些语法 JSP也是一个动态网页开发技术. JSP本质 Jsp实际上就是一个Servlet,在jsp被访问时,tomcat会把jsp转换为一 ...

  8. 对vueloader的研究

    vue-loader是webpack的加载器,允许您以称为单文件组件(SFC)的格式创作Vue组件: <template> <div class="example" ...

  9. shiro安全框架学习-1

    1. apche shiro 是Java的一个安全)框架 2.shiro可以非常容易的开发出足够好的应用,不仅可以在JavaSE环境,也可用在JavaEE环境 3. shiro可以完成 认证,授权,加 ...

  10. Android逆向之旅---解析编译之后的Resource.arsc文件格式

    一.前言 快过年了,先提前祝贺大家新年快乐,这篇文章也是今年最后一篇了.今天我们继续来看逆向的相关知识,前篇文章中我们介绍了如何解析Android中编译之后的AndroidManifest.xml文件 ...