官方推荐的数据框架：在vue的开发中 vue实现视图层的开发，vuex来实现数据层，实现数据共享

vuex是整个虚线的内容：当项目中多个组件中的数据传值很困难时，把公用的数据放到一个公共的空间去存储，某一组件改变了这个公共部分的数据内容，其他组件就能感知到，vuex虚线中的内容就是公共数据存储的区域
紫色State：所有的数据都存储到State中，组件要用到公用数据直接调用State就可以了(当需要改变数据时不能直接用组件去改变State里的公用数据)
黄色Actions：放置的异步操作和一些复杂的批量的同步操作
红色Mutations：里面放一个一个同步的对State的修改
组件修改数据必须先调用Actions，Actions做一些异步操作或者是批量的同步操作，Actions再去调用Mutations，通过Mutations去改变State里的数据，有时也可以绕过Actions让组件直接调用Mutations去修改State的数据
当组件调用Actions时是组件调用Dispatch方法来操作Actions
组件直接调用Mutations或者Actions调用Mutations是通过Commit方法调用Mutations
数据发生变化后 组件的内容也就变化
用vuex时可以用vue面板：Vue Devtoos做代码的调试

使用时可以单独创建一个文件夹并创建index.js文件文件内格式

并在全局引入(main.js文件)：import引入

Vue对象中添加 store

使用格式：{{this.$store.state.city}}

改变 state 的值：

组件调用 Actions 时用 dispatch 方法：方法传入参数，第一个参数是一个在 actions 里定义的方法，第二个是需要传的值

actions 里的第一个参数 ctx 是 changeCity 的上下文帮助 changeCity 方法拿到 commit，commit 里的 changeCity 是 mutations 里的 changeCity

mutations 中函数名不需要和组件调用 dispatch 里的方法名一样
mutations 里的方法也接受两个参数第一个是 state ，第二个是外部( actions 里的 changeCity 传入的第二个参数)传入的参数

actions 里的的方法调用commit方法调用 mutations 里的方法，通过 mutation 里的方法来改变 state 里的数据

数据简单的时候允许绕过 actions 直接调用 mutations 直接在组件中调用 commit 方法

vuex里的几个高级的api

mapState：

先引入：import { mapState } from ‘vuex’

mapState 是指把 vuex 里的数据映射到组件里的计算属性 computed 中
图中就是把 city 这个(公用)数据映射到名字为 city 的计算属性中

之后就可以直接 this.city 这样用了

之后就可以直接 this.city 这样用了

他也可以传入为一个 Object，意思是吧 vuex 中的公用属性 city 映射到组件的计算属性中，映射的名字是 currentCity

mapMutation:

先引入

在使用(用在 commit 方法的函数中)：意思是 mutation 中有一个 changeCity，把这个 changeCity 映射到组件中的名字也为 changeCity 里，之后调用 mutation 的 commit 方法就可以简化了(注释部分是 commit 方法)

vuex 里的 getters：它的作用有点类似于组件中的 computed 计算属性的作用，当需要根据 state 里的数据算出一些新的数据的时候就可以用 mapGetters 来提供新的数据 避免数据的冗余。用法同 mapState、mapMutation

官网给出的代码

vuex 里的 Module：当遇到非常复杂的业务场景比如有很多公用的数据在vuex里存储比如把所有的 actions 或 mutations 的数据都放到一个 actions 或 mutations 里存储，这个 actions 或 mutations 文件会变得非常庞大不易维护，这时可以借助 Module 来对这个文件进行拆分，拆分以后 moduleA 只需要存储A模块所对应的 state 存储和 mutations 等操作，moduleB 只需要存储B模块所对应的 state 存储和 mutations 等操作，而在创建 store 时候在对所有模块进行一个整合，所以维护性更好

官网给出的代码