由例子开始,从中学会简单使用Vuex,
需求,把路由的标题应用在网页上,效果如下:

环境: 利用了vue cli3.x并在初始化项目时添加了Vuex

1.在目录store下的index.js中的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    routeName: ''
  },
  mutations: {
    SET_ROUTE_NAME: (state, name) => {
      state.routeName = name
    }
  },
  actions: {
    setRouteName({ commit }, data) {
      commit('SET_ROUTE_NAME', data)
    }
  },
  modules: {}
})

详解: 其实比较简单的是,不用写actions这一步,但我为什么要折腾,是因为这样更加的规范.那么mutations和actions有什么区别呢?
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。

2.在目录router的index.js下,调用dispatch,修改routeName,部分代码如下

// 引入store
import store from '../store/index.js'

// 下面的to.meta.title,是需要在路由中添加个meta对象(属性)

// 添加路由前置守卫
router.beforeEach((to, from, next) => {
  // 路由发生变化修改页面title
  if (to.meta.title) {
    store.dispatch('setRouteName', to.meta.title)
    next()
  }
})

3.在组件中取得vuex中的routeName值

{{ $store.state.routeName }}

一般情况下,我们最好等到 store.state.xxx变化的时候, 再重新求取计算属性，触发更新相关联的 DOM。
所以这么写会更好

// 引入mapState,这是vuex中提供的辅助函数,帮助我们生成计算属性
import { mapState } from 'vuex'

export default {
   computed: {
     ...mapState({
       routeName: state => state.routeName
     })
   }
}

当然,Vuex的方法还有很多,建议看vue官网下的vuex详解