创建分支：city-vuex
拉取到本地并切换分支：
git pull
git checkout city-vuex
我们要做的功能是在城市列表页，选择某一个城市后，首页右上角的城市也跟着变化。
安装Vuex：
npm install vuex --save
在src目录下，创建store文件夹，新建index.js文件：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: '北京' } })
然后打开main.js文件，添加：
import Store from './store' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
打开Home.vue文件，可以看到给 home-hander 组件传递了一个city，现在我们改为：
<home-header></home-header>
现在刷新首页，右上角的北京没有了，只有一个下箭头。
然后打开Header.vue文件：
<div class="header-right">{{this.$store.state.city}} <i class="iconfont arrow-icon"></i></div> <script> export default { name: 'HomeHeader' } </script>
这时首页右上角的北京又显示出来了。this.$store.state.city 取的是store里存储的默认值：北京
再打开city下的List.vue文件，把当前城市改为读取stroe：
<div class="button">{{this.$store.state.city}}</div>
这时候我们可以把store/index.js中 state.city 的默认值改为：上海
然后可以看到首页和列表也中的当前城市，都变为了上海。
下面我们希望点击热门城市，可以跟着变化，给每个热门城市添加点击事件：
<div class="button-wrapper" v-for="item in hotCity" :key="item.id" @click="handleCityClick(item.name)"> <script> export default { methods: { // 热门城市点击事件 handleCityClick (city) { this.$store.dispatch('changeCity', city) } }, } </script>
然后打开store/index.js文件：
根据上图，首先组件调用 actions，actions 调用 mutations， mutations 去改变数据。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: '北京' }, actions: { changeCity (context, city) { context.commit('changeCity', city) } }, mutations: { changeCity (state, city) { state.city = city } } })
这时候点击热门城市，当前城市跟着变化，首页右上角的城市也变化。这就实现了首页和城市列表页的数据共享。
但是我们刚才这个过程里没有任何的异步操作，而且操作也很简单，不是一些批量的数据操作，所以组件没必要去调用acions，可以直接去调用 mutations，所以我们可以修改为：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: '北京' }, // actions: { // changeCity (context, city) { // context.commit('changeCity', city) // } // }, mutations: { changeCity (state, city) { state.city = city } } })
然后Lits.vue修改为：
// 热门城市点击事件 handleCityClick (city) { // this.$store.dispatch('changeCity', city) this.$store.commit('changeCity', city) }
OK，功能一样可以实现。
下面把城市列表也添加上点击事件：
<div class="item border-bottom" v-for="v in item" :key="v.id" @click="handleCityClick(v.name)"> {{v.name}} </div>
当然搜索的时候点击城市也要添加点击事件，打开Search.vue：
<li class="search-item border-bottom" @click="handleCityClick(item.name)" v-for="item in list" :key="item.id"> <script> export default { methods: { // 切换城市点击事件 handleCityClick (city) { this.$store.commit('changeCity', city) } }, } </script>
OK，功能实现了。
下面就是在点击切换城市后，直接跳回到首页：
handleCityClick (city) { this.$store.commit('changeCity', city) this.$router.push('/') }
现在点击城市后，可以切换当前城市并且返回到首页。
Vuex的高级使用和localStorage
继续上面的代码，当我们点击城市切换，并返回到首页时，这时候都没问题，但是我们刷新页面，这时候右上角的城市又变为了默认值北京。这时候我们就需要用到 localStorage 本地存储。
打开stroe/index.js文件：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: localStorage.city || '北京' }, mutations: { changeCity (state, city) { state.city = city localStorage.city = city } } })
这时切换城市后，在怎么刷新，也不会变了。
建议：
当使用 localStorage 的时候，建议大家在外层包裹一个try catch，因为在某些浏览器，如果用户关闭了本地存储功能或者使用了隐身模式时，使用 localStorage 有可能会导致浏览器抛出异常，代码就运行不了了。所以修改为：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let defaultCity = '北京' try { if (localStorage.city) { defaultCity = localStorage.city } } catch (e) { } export default new Vuex.Store({ state: { city: defaultCity }, mutations: { changeCity (state, city) { state.city = city try { localStorage.city = city } catch (e) { } } } })
刷新，功能还是一样的。
这时候我们发现store/index.js的文件开始复杂起来了，这时候我们可以进行拆分，新创建一个state.js文件，我们把一部分代码复制到state.js中：
let defaultCity = '北京' try { if (localStorage.city) { defaultCity = localStorage.city } } catch (e) { } export default { city: defaultCity }
再创建一个mutations.js文件：
export default { changeCity (state, city) { state.city = city try { localStorage.city = city } catch (e) { } } }
store/index.js改为：
import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state: state, mutations: mutations })
这样我们就拆分为了几个部分。
小bug：当我们在城市列表中，点击文字多的城市，比如“阿拉善盟”，这时首页的样式有点变形了。
打开home下的Header.vue文件，修改下样式：
.header-right
padding:0 .1rem
min- 1.04rem
float:right
text-align: center
color: #fff
这时候选几个字的城市都可以了。
下面进行代码优化
home文件夹下的Header.vue代码优化：
<div class="header-right">{{this.city}} <i class="iconfont arrow-icon"></i></div> <script> import { mapState } from 'vuex' export default { name: 'HomeHeader', computed: { // 展开运行符 // 把city这个公用数据映射到名字叫做city的计算属性之中 ...mapState(['city']) } } </script>
city文件夹下的list.vue代码优化：
<div class="button">{{this.city}}</div> <script> import Bscroll from 'better-scroll' import { mapState, mapMutations } from 'vuex' export default { computed: { // 把vuex里面的city这个公用的数据映射到这个组件的计算属性里，映射过来的名字叫做currentCity ...mapState({ currentCity: 'city' }) }, methods: { // 热门城市点击事件 handleCityClick (city) { // this.$store.commit('changeCity', city) 改为下面代码 this.changeCity(city) this.$router.push('/') }, // 有一个mutations叫changeCity，然后把这个mutations映射到组件里一个名字叫changeCity的方法里 ...mapMutations(['changeCity']) }, } </script>
然后是Search.vue页面：
import { mapMutations } from 'vuex'
export default {
methods: {
// 切换城市点击事件
handleCityClick (city) {
// this.$store.commit('changeCity', city) 改为下面代码
this.changeCity(city)
this.$router.push('/')
},
...mapMutations(['changeCity'])
},
}
Vuex核心概念：
State：存放的是公用的数据
Action：一些异步的方法可以写在Action里
Mutation：放的是同步的一些对数据的改变
Getter：当我们需要根据state里的数据，计算出一些新的数据时，我们可以用Getter。有点类似于组件中的computed计算属性的作用。
Module：可以把 store的代码进行分割成模块
例如：Getter例子：首页右上角显示：城市 城市
store/index.js文件：
import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state: state, mutations: mutations, getters: { doubleCity (state) { return state.city + ' ' + state.city } } })
home下的Header.vue文件：
<div class="header-right">{{this.doubleCity}} <i class="iconfont arrow-icon"></i></div> <script> import { mapState, mapGetters } from 'vuex' export default { name: 'HomeHeader', computed: { ...mapState(['city']), ...mapGetters(['doubleCity']) } } </script>
这时页面效果图：
提交代码并进行合并：
git add .
git commit -m "vuex实现数据共享和localStorage"
git push
git checkout master
git merge city-vuex
git push