一、Vuex概述
1.组件之间共享数据的方式
-
父->子 传值：
v-bind属性绑定 -
子->父 传值：
v-on事件绑定 -
兄弟组件之间：
EventBus
(1) $on 接受数据的那个组件
(2) $emit 发送数据的那个组件
以上只适用于小范围的数据共享，若需频繁、大范围的实现数据共享，可使用Vuex。
2.Vuex是什么？
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
3.使用Vuex统一管理状态的好处
（1）能够在vuex中集中管理共享的数据，易于开发和后期维护
（2）能够高效的实现组件之间的数据共享（大范围、频繁），提高开发效率
（3）存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
二、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')
三、创建一个使用vuex的项目
window+R 打开 “运行窗口”，输入 cmd，输入命令：vue ui ,打开 vue可视化面板 进行创建项目。
创建：
点击 "创建项目" 按钮，弹出 "保存为预设" 弹窗，按照自己需求选择是否保存，完成创建。
5.运行： 创建完成之后，展示以下界面，
选中： 任务 -> serve ，点击运行按钮，等待启动按钮变成可启用状态，点击启动按钮，就可以打开vue页面
