一.什么是Vuex?
Vuex是实现组件全局状态（数据）管理的一种机制,可以实现组件之间的共享数据,可以理解为一种数据状态管理器
二.Vuex的基本使用
- 安装Vuex依赖包
npm install vuex --save
- 导入依赖包
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
Vue.use(Vuex)
const store = new Vuex.Store({
// 把公共数据放到状态管理器
// state相当于vue当中data
state：{ tomCount:0 }
})
- 将对象store挂载到Vue实例中
new Vue({
el:'#app',
router,
// 将创建的共享数据对象，挂载到Vue实例中
// 所有的组件，可以直接从 store 中获取全局的数据
store,
render: h => h(App)
})
三.Vuex的常用属性
| 属性 | 简介 |
|---|---|
| state | 存放公共数据源 |
| mutations | 用于变更store中数据 |
| action | 用于处理异步任务 |
| getter | 联想Vue中计算属性 |
| modules | 将store分割模块 |
1.state：
state 为单一状态树，在 state 中需要定义我们所需要管理的数组、对 象、字符串等等，只有在这里定义了，在 Vue.js 的组件中才能获取你定义的这 个对象的状态
2.getter：
getter 类似 Vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getter，getter 会接收 state 作为第 一个参数，而且 getter 的返回值会根据它的依赖被缓存起来，只有 getter 中 的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算
3.mutation注意事项：
- 只能通过mutation中的函数才可以变更state中的数据，不可以直接操作state中数据
- mutation可以传递两个参数：第一个形参固定是state,第二个形参是外界传递过来
- mutation中的某个函数可以通过commit来调用
- 不要在mutation函数中，执行异步操作
4.action注意事项：
- 在actions中，不能直接修改state中的数据
- 如果要修改数据，必须通过context.commit(’’)触发Mutations中的某个方法,让Mutations协助actions修改state中的数据
- 只有Mutations中定义的函数才可以修改state中的数据
- dispatch函数，专门用来触发Actions中的某个函数
5.modules：
module 可以将 store 分割成模块，每个模块中拥有自己的 state、mutation、action 和 getter
