Vuex

在 Vuejs 2.5 开发旅游网站项目时，需要实现 city 页面的数据传递给 index 首页。由于 City.vue 和 Home.vue 没有公用父级组件，这样就无法通过一个公用的父级组件进行数据的中转。除了使用 bus 总线，还可以使用 Vuex 数据层框架来实现。

Vuex 图解

设计理念

当一个项目之中各个页面或者多个组件之间进行数据传值很困难的时候。如果可以把公用的数据放到一个公共的存储空间去存储。然后某一个组件改变了公共的数据，其他的组件就可以感知到数据的改变。

上图中绿色 Vuex 虚线的内容就是一个公用数据存储区域。这个区域可以理解成一个仓库。这个仓库由几部分构成。
所有的公用数据，存放在 State 之中（紫色）。如果组件想用公用的数据，直接去调用 State 即可。

有时候，希望改变 State 里面的数据。不能直接让组件去改动数据。必须通过相应的流程完成。流程如下：

如果有异步操作或者复杂的同步操作，那么将它们放置在 Actions （黄色），组件先去调用 Actions ，Actions 紧接着去调用 Mutations （红色）， 而 Mutations 逐个的对 State 的修改。
也可以越过  Actions ，让组件直接调用  Mutations ，修改 State 里面的数据。

使用

在 Vuejs 2.5 开发旅游页项目中的使用方法记录。

创建 store 文件夹，index.js 文件。Store 相当于图示中的公共数据区域（绿色虚线），随后再创建一个 state。

并在 main.js 中声明。

直接使用 {{this.$store.state.city}} 来使用刚刚 store 中 state 下面 city 的数据。

完善 store 的 index.js 代码

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    city: '重庆'
  },  // actions 可省略
  actions: {
    changeCity (ctx, city) {
      ctx.commit('changeCity', city)
    }
  },  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})

模块化

store 同样可以进行模块化，优化简洁代码。

mapState

之前使用公用数据时，需要写得很复杂，例如 {{this.$store.state.city}}。Vuex 提供了 mapState 的 API。搭配 computed 计算属性中的展开运算符 ...mapState 使公用数据写法变得简洁。

再看一个例子：

keep-alive 性能优化

当查看 network 时候，可以看到从首页到城市选择页切换过程中每次切换都会发送 ajax 请求。所以我们对此进行优化。

在 App.vue 中给 <router-view/> 外部添加一个 <keep-alive> 标签。其含义是路由的内容被加载过一次之后，就把路由的内容放置到内存中，下一次再使用路由的时候，无需重新加载组件、执行钩子函数。只需要从内存中拿出以前的内容显示就可以了。

activated 生命周期钩子

结合 keep-alive 新增的 activated 生命周期钩子，实现每次点击曾经选中过的城市，不发送 ajax，城市选择变化的时候再进行 ajax 请求的优化。

作者：evenyao
链接：https://www.jianshu.com/p/b083b9f35bf8