简介：vue官方提供的状态管理器
vuex的使用步骤：
- 安装：npm install --save vuex；
- 在 src 下创建一个 store/index.js 文件，这个文件就是 仓库的配置文件；
3.需要在 main.js 中引入第2步中暴露出来的仓库的实例对象。并配置在 new Vue() 的地方，通过 store 选项配置
$store
使用了 vuex 之后，自动绑定到vue实例上的数据，这个数据就是当前vuex仓库的实例对象
vuex核心：
- state 管理数据
- getters 对数据进行二次计算使用
- mutations 修改state数据
- actions 异步请求
- modules 仓库模块化
state
存放的是仓库中的数据
可以将数据都放在仓库中，但是没必要。放一些彼此依赖强的数据即可。
getters
store 的计算属性，可以对 state 中的数据或者其余 getter 数据做二次计算，并返回一份新数据。
- 它不能修改i仓库中的数据，只能依赖仓库中的数据进行二次计算。会伴随依赖项的变化而变化；
- 每个 getter 都会自动接受到 state 参数，这个参数就是当前仓库实例对象的 state 数据；
- 必须要有返回值
mutations
里面存放的是 mutation, mutation 是唯一能够修改仓库state的数据的地方
- 它只能同步修改仓库中的数据，不能写异步代码；
- 自动接受到第一个参数，就是 state；
- 第二个参数，就是调用时传递过来的 payload
actions
里面存放的是 action, action 是可以异步去修改 state 数据的地方，但是它并不能直接修改 state 数据，而是在里面调用了 某个 mutation.
- 它能够写异步代码；
- 它不能直接修改仓库中的数据；
- 要想改变仓库中的数据，只能调用mutations去更改仓库中的数据；
- 异步代码也不必都写在这里(可复用的代码写在这里)
简单实现一个仓库
// 1. 引入 Vue
import Vue from 'vue'
// 2. 引入 Vuex
import Vuex from 'vuex'
// 3. 调用 Vuex
Vue.use(Vuex)
// 4. 实例化 Vuex 的仓库的实例对象
const store = new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
}
})
// 5. 暴露store
export default store
如何调用vuex中的数据（常用）
- 使用 mapState() 这个辅助函数的方式获取仓库中的state数据；
- 使用 mapGetters() 辅助函数获取仓库中的getters数据；
- 通过 mapMutations() 辅助函数获取仓库中的mutations函数；
- 通过 mapActions() 辅助函数获取仓库中的actions函数
