Vuex组件数据共享

组件之间共享数据的方式

• 1.父向子传值 v:bind绑定数据, props接收
• 2.子向父传值 :父组件 v-on事件绑定,子组件用this.$emit()接受
• 3.兄弟之间共享数据 全局的EventBus,挂载 vue的原型上 $emit发送数据的那个组件,$on接收数据的那个组件
• 4.祖先和后代相互传参 :祖先要使用provide方法传参，后代使用inject属性接受祖先中的参数，
• 5.vue实例属性传参(parent、children[n]、root、refs)

•  +$parent 获取父元素的数据/方法  获取父元素的整个vm实例
•  +$children  获取子元素的数据/方法(mounted钩子函数，要有下标）
• +$root获取根组件的数据/方法
• $refs:this的子元素中需要定义ref属性：比如ref=

 如果ref定义在DOM标签中==：this.$refs.xxx获取的是DOM对象

 如果ref定义在子组件标签中==：this.$refs.xxx获取的是子组件的vm实例

Vuex是什么?

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的共享

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源“而存在。这也意味着，每个应用将仅仅包含一个 store 实例

使用Vuex统一管理的好处?

• 1.能够在vuex中集中管理共享数据,易于后期开发和维护
• 2.能够高高效的实现组件之间的共享,提高开发效率
• 3.存储在vuex中都是响应式的能够实时保护,数据与页面的同步

什么样的数据适合存储在vuex中?

一般情况下,只有组件之间共享数据才有必要存储到vuex中,对于组件的私有数据,依旧存储在组件自身的data中即可,

vuex的作用?

1、vuex是专为Vue.js应用程序开发的状态管理模式(集中式存储)--->公共仓库

2、缓存 keep-aliv

• vuex：不刷新，不关闭页面，就会保存以前的数据,刷新就不存在数据
• sessionStorage:会话存储，刷新有数据、关闭页面没有数据
• localStorage:本地存储，刷新有数据、数据永久

vuex：“单向数据流”理念

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化

 vuex的异步函数执行的过程：

vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3.创建store对象

import Vue from 'vue'
import Vuex from 'vuex