在一般的开发中vue一般承担视图层的开发内容。当我们遇到大量数据之间传递的时候，往往我们需要一个数据框架进行辅助
这个就是vuex了（官网文档学习）
设计理念：状态管理库（创建一个公共的响应式数据存储仓库）
一张图带你学习vuex
数据的获取
数据都存放在state中。组件可以直接调用state中的数据
数据的改变：（数据不能通过组件去直接改变，需要走一个流程（单项数据流））
分为两种情况：同步和异步
当数据同步的时候：我们可以直接跳过Action ，组件调用commit方法。触发vuex中Mutations的自定义函数（里面是同步的对state的修改）
当数据异步的时候：组件调用Dispatch方法。触发vuex中Actions的自定义函数（里面存放着异步数据，或者比较复杂批量的同步操作也可以放在里面），接着我们在Actions自定义函数中调用commit方法。去触发vuex中执行vuex中Mutations的自定义函数。
小结：数据最终的改变在Mutations中完成
vuex使用：
首先安装vuex
git中输入 npm install vuex --save
在项目中main.js文件引入vuex （但是一般不这样做，单独在src下创建一个stroe文件夹创建index.js文件）
按照官网引入 引入vue 再引入vuex （因为vuex是一个插件）按照插件的引入格式，所以Vue.use（Vuex）
然后我们需要导出一个由 vuex 创建的仓库（需要new）
仓库里面存放着数据，和改变数据的类
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ //vuex的数据存储点 city:'上海' }, actions:{ changeCity(ctx,city){ //自定义函数，第一个参数是vuex上下文，第二个为接收的数据city ctx.commit('changeCity',city) //通过vuex上下文包含commit方法。调用commit，参数为自定义一个函数和接收city。自定义函数在mutations中执行 } }, mutations:{ changeCity(state,city){ state.city = city } } })当然，通过以上我们是构建了一个数据仓库，但是我们还没有在main.js 文件中引入（直接引入文件夹，自己查找）
import store from './store'创建跟vue实例的时候需要以下引入就行路由一样
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import fastclick from 'fastclick' import VueAwesomeSwiper from 'vue-awesome-swiper' import store from './store' import './assets/styles/reset.css' import './assets/styles/border.css' import './assets/styles/iconfont.css' import 'swiper/dist/css/swiper.css' Vue.config.productionTip = false fastclick.attach(document.body) Vue.use(VueAwesomeSwiper, /* { default global options } */) /* eslint-disable no-new */ new Vue({ //根实例 el: '#app', router, store, //被派发到每个子组件 components: { App }, template: '<App/>' })组件如何访问vuex中的数据（因为在跟实例中。我们可以直接访问）：
this.$store.state.cityvuex的高级写法
通常对于一个仓库。我们还可以分几个模块。使得代码更加清晰。
拆分成多个单页面在index中引入。然后分别 export default 导出
对于数据的查看和修改，还有更方便的写法
在对应的文件中引入mapState和mapMutations 可以使得写法更加简洁
主要运用了es6语法中的。。。扩展运算符。将store 中的state映射到了当前文件。这样就简化了操作
<script> import {mapState,mapMutations} from 'vuex'//vuex简便方法 import Bscroll from "better-scroll"; export default { name: "HotCity", }, methods:{ handleCity(city){ this.changeCity(city) //简写 this.$router.push('/') //路由自带属性，回到某个页面 }, ...mapMutations(['changeCity']) }, computed:{ ...mapState(['city']) // ...mapState({ // hotCity:city //标签中对应的是this.hotCity // }) //运用展开运算符，把store中的city映射到当前文件。括号里可以是数组和对象 } }; </script>
