Vuex

简介：vue官方提供的状态管理器

vuex的使用步骤：

1. 安装：npm install --save vuex；
2. 在 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 数据做二次计算，并返回一份新数据。

1. 它不能修改i仓库中的数据，只能依赖仓库中的数据进行二次计算。会伴随依赖项的变化而变化；
2. 每个 getter 都会自动接受到 state 参数，这个参数就是当前仓库实例对象的 state 数据；
3. 必须要有返回值

mutations

里面存放的是 mutation, mutation 是唯一能够修改仓库state的数据的地方

1. 它只能同步修改仓库中的数据，不能写异步代码；
2. 自动接受到第一个参数，就是 state；
3. 第二个参数，就是调用时传递过来的 payload

actions

里面存放的是 action, action 是可以异步去修改 state 数据的地方，但是它并不能直接修改 state 数据，而是在里面调用了 某个 mutation.

1. 它能够写异步代码；
2. 它不能直接修改仓库中的数据；
3. 要想改变仓库中的数据，只能调用mutations去更改仓库中的数据；
4. 异步代码也不必都写在这里(可复用的代码写在这里)

简单实现一个仓库

// 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中的数据（常用）

1. 使用 mapState() 这个辅助函数的方式获取仓库中的state数据；
2. 使用 mapGetters() 辅助函数获取仓库中的getters数据；
3. 通过 mapMutations() 辅助函数获取仓库中的mutations函数；
4. 通过 mapActions() 辅助函数获取仓库中的actions函数