vuex的安装使用

vuex 是vue用来管理数据状态的一种机制，将Vue中所有的状态（数据）抽离出来进行统一管理，主要是用于组件之间共享数据。一般来说，如果不是大型单页项目，像SPA这些，也是不会去使用vuex的，毕竟vue是一个轻量级的框架，启动快是它的特点，所以vue的优化就有很大的一点是尽可能的减少依赖数量，达到优化加载速度。

首先回顾一下组件之间共享数据的几种方式

父子组件：

父向子传值：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 使用v-bind简写为：属性绑定把需要传给子组件的值赋给该属性

子向父传值：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

兄弟组件：

• 创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁
• 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
• 在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

频繁大范围的组件数据共享（vuex）

那么vuex如何使用呢，下面就vuex的使用流程来讲解vuex到底该如何使用

1.首先安装vuex的依赖包

npm install vuex --save

2.导入vuex包

import Vuex from ‘vuex’
Vue.use(Vuex)

3.通过store.js创建store对象

const store = new Vuex.Store({
		state:{count:0} //state中存放的是全局共享的数据
})

4.将store对象挂载到vue实例中

new Vue({
		el:'#app',
		render:h => h(app),
		router,
		store
})

vuex主要的四个核心概念：

• State：提供唯一的公共数据源，所有共享数据都要统一放到store的state中进行存储
• Mutation：用于变更Store中的数据，可定义函数对state中数据及进行操作
• Action：主要用于异步任务方法的编写，可以携带参数
• Getter：用于对Store中的数据进行加工处理形成新的数据，对数据进行包装，类似Vue的计算属性，Store中数据发生变化，Getter的数据也会跟着变化