状态管理工具 状态就是数据，管理vue的通用数据（多组件共享的数据）
场景：
1.某个状态在很多个组件中使用（个人信息）
2.多个组件共同维护一份数据（购物车）
导入注册流程
1.安装vuex 3.0版本
npm i vuex@3
2.新建vuex模块文件夹 store文件夹
3.创建仓库 （store文件夹下的index.js文件）
import Vue from ‘vue’
import Vuex from 'vuex'
Vue.use(Vuex) //插件注册安装
const store=new Vuex.Store() //新建空仓库
export default store //导出给main.js使用
4.main.js导入挂载
import store from '@/store/index'
组件访问仓库：this.$store
注：mapState mapGetters均映射到计算属性； mapActions和mapMutations映射到methods
一.state状态（类似于data数据）
提供唯一的公共数据源，所有共享数据都统一放到Store中的state中存储
data是组件自己的数据，state是共享数据
1.提供数据
2.使用数据
2.1mapState 辅助函数，把store中的数据自动映射到组件的计算属性中
二. mutations 修改state数据 (同步)
组件中不能直接修改仓库的数据 this.$store.state.count++(错的) 类似于methods
流程：
1. 定义mutations对象，对象中存放修改state的方法
2. 组件提交调用mutations
3. mutations传参（只能传一个参数，需要传多个，可改为对象{}形式）
this.$store.commit('方法名',参数)
4. mapMutations辅助函数
把位于mutations中的方法取出来，映射到methods中
this.subCount(n) 调用
三. actions
处理异步操作（发请求）
1.context上下文，此处未分模块，相当于store 分块模块后，context为当前模块环境
2.调用actions里的方法（actions名字，参数）：
3.mapActions辅助函数
将actions里面的方法提取出来，映射到methods中
四. getters
类似于计算属性 第一参数为state，必须要有返回值
除state外，有时需要从state中派生出一些状态，这些状态依赖state，此时会用到getters
1.定义getters
2.访问getters
2.1 通过store访问
{{$store.getters.filterList}}
2.2辅助函数mapGetters
五. 模块 module
当项目越来越大时，store会变得臃肿，vuex会难以维护
1. 模块拆分：
在store文件夹下新建modules文件夹，存储各个模块的state mutations actions getters，并进行导出；在store/index.js中导入并挂载。
2.使用模块中的数据 state
2.1 直接访问模块名获取
$store.state.模块名.xx
2.2 使用mapState映射
默认根级别的映射 mapState(['xx'])
子模块的映射 mapState('模块名',[''xx])
需开启命名空间
数据映射
3. 使用模块中的getters
为属性名 xxx
1.先获取仓库store，然后通过'模块名/xxx'获取数据
2.通过映射的方式，辅助函数
4.模块中使用mutations
xxx为方法名
1.通过store调用
$store.commit('模块名/xxx'，参数)
2.通过辅助函数mapMutations映射
默认是根级别的映射: mapMutations(['xxx'])
子模块的映射: ...mapMutations('模块名'，['xxx']) 要开命名空间
5.模块中使用actions
小工具
json-server,准备后端接口服务环境
安装：npm i json-server -g 或
yarn global add json-server
操作步骤： 『前端必备』本地数据接口 —— json-server 从入门到膨胀-腾讯云开发者社区-腾讯云
1.在根文件夹下创建db文件夹和index.json文件
2.准备json数据
3.执行 json-server --watch index.json
4.查http://localhost:3000/cart
购物车案例
修改购物数量
购物车计算商品数量和总价
