111

74 阅读1分钟

Vuex概述

1.组件之间共享数据的方式

  • 父->子 传值:v-bind 属性绑定
  • 子->父 传值:v-on 事件绑定
  • 兄弟组件之间:EventBus

(1) $on 接受数据的那个组件

(2) $emit 发送数据的那个组件

以上只适用于小范围的数据共享,若需频繁、大范围的实现数据共享,可使用Vuex

2.Vuex是什么?

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

3.使用Vuex统一管理状态的好处

(1)能够在vuex中集中管理共享的数据,易于开发和后期维护

(2)能够高效的实现组件之间的数据共享(大范围、频繁),提高开发效率

(3)存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包 import Vuex from 'vuex' //将导入的vuex安装至vue项目中 Vue.use(Vuex)

3.创建 store 对象 new Vuex.Store({ //state 中存放全局共享的数据 state:{count:0} })

4.将store对象挂载到vue实例中 new Vue({ //所有的组件可以直接从store中获取全局的数据 store, render: h => h(App) }).$mount('#app')