【Vue19】Vuex
从例子中来说这个Vuex，城市选择页面选择某个城市，然后跳转到首页，并且显示的是之前选择的那个城市，怎么做？
城市列表页
首页
这两个页面是不同的组件，城市页面来自City，首页来自Home，想要它们两个传递组件，但是它们两没有公用的父级组件。也就是非父子组件传递数据，使用bus来实现吗？比较麻烦，Vue的官方推荐了这样一个数据框架，大型项目可用的Vuex。（因为Vue在大型项目中，主要承担的是视图层的数据内容，涉及到大量数据传递的时候用的就是数据框架进行辅助）
走进vuex
我是官方的图
这是官方网站的一张图，
vuex主要是图中的虚线框的内容。它是什么？
当我们一个项目各个页面，多个组件之间进行复杂的数据传值很困难的时候，可以这样想，如果我们把公用的数据放到一个公共的存储空间去存储，某一个组件改变了这个公共数据，其它组件能感知到。这就可以了。
虚线框的内容就是一个公用数据存储区域，这个区域就是一个
store仓库，这个仓库由以下几个部分组成：
State: 所有的公用数据存放在这里，组件想用一个公用数据，调用它就行了
Actions: 异步操作，或复杂批量的同步操作放在这里
Mutations: 一个个同步的对State的修改
有的时候组件想要改变数据，不能随便改变数据，要走一个流程，这个流程是这样的。如果我们有一些异步操作，或者比较复杂的批量同步操作，放到Actions里，组件先去调用Actions，紧接着调用Mutations，Mutations里放的是一个个同步的对State的修改，只有通过Mutations，最终才能改变公共数据的值。
有的时候组件可以不调用Actions，直接调用Mutations去修改State里的值。
额外需要注意的是，当组件调用Actions的时，是调用的一个Dispatch的方法。
组件调用Mutations或者Actions调用Mutations时，是要通过一个commit方法来操作Mutations。
其实就是一个单向数据的改变流程。
当数据发生了变化，页面展现的内容也就发生了变化。
可以通过Devtools来进行调试。
使用Vuex
npm install vuex --save 先安装它
因为考虑到vuex的文件会比较多要有些复杂，所以在src下这样新建一个文件夹及js文件：
就是它
里面的内容这样写
store/index.js内容
前三行代码是官网上写的引入步骤。
后面
export 是因为城市页和首页公用的一个数据是城市的名字，也就是city，所以先这样写。
别忘了，要去main.js里面引入一下。
最外层的main.js
【因为我自己今天要在一个项目引入vuex，结果发现漏掉了这一步，死活没有想要的效果，后来发现忘了把这一步补上】
已经创建了一个虚线部分store，然后创建了state，存了一个city数据。
下一步让组件使用这个工具，首先首页的header组件用到这个数据了，回到首页的代码。home.vue删除以下
去掉
去掉
去掉
都去掉
以前首页当前在某个城市是ajax后端发回给我们的，现在不用后端返回了，前端自己存储，不需要后端告诉我当前在哪个城市，有关city都去掉。
然后把公用数据state里的深圳这个城市显示出来。怎么用？
home/header组件删除以下
不要它
这里的
this.city要修改一下
要修改
改成
this.$store.state.ctiy，因为在main.js里创建根实例的时候，将store传递进去了，然后派发到每一个子组件里，所以每一个子组件都能用它。
改成这样
首页就有这个城市了
出现了
城市页的当前城市也要改成这样
image.png
现在实现最开始说的需求
当我们点击热门城市的时候，公用数据里的城市也随之发生了变化
也就是希望改变state，按照之前说的流程，先去Actions，然后到Mutations。
先去组件里，list.vue这个组件，先写个点击事件，当我们点击热门城市的时候，城市alert出来：
.点击热门城市
城市信息显示出来
然后运用Dispatch这个方法。一定要调用这个方法
官网图是这么说的
当改变
city时，派发一个changeCity的action，把city作为一个参数传过去
image.png
仅仅这样写是不行的，因为在之前的
store/index.js创建store的时候，只有一个state，并没有actions，所以还需要创建actions，然后在它里面有一个名称为changeCity的action，它是一个方法，接收两个参数，一个是上下文ctx，另外一个是我们传递过来的数据city。
Actions
打印一下这两个参数看看：
action的参数
已经到Actions里了，接下来要去调用Mutations：
对应关系
Actions如何调用Mutations?官网的图上有说通过
commit，还记的actions里的ctx参数吗？就是在这里拿到commit这个方法。
ctx
然后
ctx.commit('changeCity'， city) 执行changeCity这个mutation，将city传过去。而在
Mutations里。创建一个名为changeCity的mutation，第一个参数是state，第二个参数是传过来的city。state指的是我们整个的公用数据，这个时候让state.city = city就行了，让公用数据里的city等于传过来的city就OK啦。
小优化
在上面，我们有说Actions主要是一些异步操作或者复杂的同步操作，但是在这里并没有比较复杂的操作，所以Actions可以省略掉。
用不到先注释掉
然后去组件内，将之前用dispatch调用
Actions的地方改成直接调用commit方法，调用Mutations
image.png
做个跳转
最后做一个跳转，当点击某个城市，然后返回到首页。
借助【编程式导航】，详情可点我点我
以前我们用的基本上除了a标签，然后就是window.location.href这类来实现跳转，但是这里不使用这个，使用的router提供的，比如说router.push
使用router.push
Over
