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')