使用Vuex实现（首页和城市选择页面的）数据共享

1. 创建新分支city-vuex并拉到线下，切换到新分支上：

然后重启服务器。

2. 我们要实现的功能是点击城市选择页面的城市时，首页右上角的城市会随之切换到相同的城市：

这就意味着首页和城市选择页面要共享一些数据，或者说城市选择页面要传送一些数据给首页，即City.vue和Home.vue要共用一些数据，但是这两个组件没有一个共用的父子组件，就不能用之前的方法：

3. Vuex
Vuex是一个vue官方推荐的数据框架，在vue的大型项目开发之中，vue只能承担视图层的内容，当我们涉及到大量数据传递的时候，往往都需要一个数据框架进行辅助，在vue之中，这个数据框架就是vuex是一个vue官方推荐的数据框架，在vue的大型项目开发之中，vue只能承担视图层的内容，当我们涉及到大量数据传递的时候，往往都需要一个数据框架进行辅助，在vue之中，这个数据框架就是vuex

• Vuex的设计理念：
  当我们的项目之中各个页面或者是各个组件之中之间进行复杂的数据传值很困难的时候，我们希望能把这些公用的数据放在一个公共的存储空间去存储，然后某一个组件改变了这个公共的数据，其他的组件就能感知到。
  
  Vuex是指右侧绿色的虚线区域，所有公共的数据都是放在state里的，组件想用一个公用的数据，直接去调用state就可以了。有的时候我们希望去改变公用数据，但是不能直接用组件改变，要走左侧这个流程，如果我有一些异步操作，那么我把这些异步操作放在actions这里，或者是一些复杂的批量的同步操作，也可以放在actions里。组件先去调用actions，紧接着再去调用mutations，mutations放的是一个一个同步的对state的修改。有的时候我们也可以越过actions，直接让组件调用mutations修改state里面的数据。要注意的是，组件通过一个dispatch方法调用actions，通过方法commit来调用mutations。
  

4. 步骤

• 先要安装vuex:先要安装vuex:
  
  然后重启服务器。
• 在main.js中引入vuex这样做有些不合适，因为后面要做的vuex文件夹还是比较复杂的。一般做法是我们在src下面创建一个store的文件夹，然后在store中创建一个index.js文件：
• 在index.js中引入Vue和Vuex，在Vue中使用插件都是通过Vue.use()，然后我们带出一个由vuex创建的一个仓库，仓库里面一般有一个state的内容，存放的是全局共用的数据：
  
  然后在main.js中导入store这个文件夹，