vuex仓库：集中式状态管理工具，实现任意组件通信。

1、vuex五大核心概念：

state：包含了多个状态数据的对象。

mutations：包含了多个直接修改状态数据的方法的对象。【这里可以进行异步操作，但是不推荐，因为浏览器的 vue 调试插件中不能够及时的更新数据，有可能导致界面不能及时更新。】

actions：书写逻辑业务、书写异步的地方，包含了多个间接修改状态数据的方法的对象。

getters：包含了多个状态数据的计算属性的get方法的对象。

modules：包含了多个子级模块的对象。

2、vuex缺点：

数据存储在state中，state本质是一个js对象，数据存储并非持久化的。

数据持久化存储：本地存储

3、搭建vuex仓库

3-1、安装vuex [ vue2搭配vuex@3、vue3搭配vuex@4 ]

npm i vuex@3

3-2、创建大仓库 src/store/index.js

import Vue from 'vue'
// 引入 vuex 插件
import Vuex from 'vuex'
// 安装插件
Vue.use(Vuex)

// 1、引入小仓库
import login from './modules/login'
import home from './modules/home'

// 对外暴露一个store类的实例
export default new Vuex.Store({
    // 2、管理小仓库
    modules: {
        login,
        home
    }
})

3-3、创建小仓库 src/store/modules/login.js

// 小仓库存储数据
const state = {

}

// 小仓库修改数据
const mutations = {

}

// 小仓库书写逻辑和异步
const actions = {

}

// 小仓库计算属性书写
const getters = {

}

// 对外进行暴露
export default {
  state,
  mutations,
  actions,
  getters
}

3-4、main.js 入口文件配置

import store from './store'
new Vue({
  store, // 导致任意的vc组件身上多了一个$store属性
  render: h => h(App)
}).$mount('#app')

4、vuex中常用的辅助函数：mapState、mapMutations、mapActions、mapGetters。