vuex-router-sync如何使用 vuex-router-sync如何使用

简单来讲vuex-router-sync插件就是将vue-router的状态同步到vuex中
一、安装

npm下载地址：https://www.npmjs.com/package...

> npm i vuex-router-sync --save

二、使用

import { sync } from 'vuex-router-sync' import store from './vuex/store' import router from './router'sync(store, router, {moduleName: 'RouteModule'})const app = new Vue({ router, store, }).$mount('#app');

打印store.state即可看到当前路由状态

文章图片

三、使用场景假如您想在一个组件中显示一条消息，希望在几乎每一个页面上都显示“Have a nice day, Jack”，除了首页，因为首页要显示"Welcome back, Jack".
借助vuex-router-sync，您可以轻松实现

const Top = { template: '{{message}}', computed: { message() { return this.$store.getters.getMessage; } }, }; const Bar = { template: '{{message}}', computed: { message() { return this.$store.getters.getMessage; } } }; const routes = [{ path: '/top', component: Top, name: 'top' }, { path: '/bar', component: Bar, name: 'bar' }, ]; const router = new VueRouter({ routes }); const store = new Vuex.Store({ state: { username: 'Jack', phrases: ['Welcome back', 'Have a nice day'], }, getters: { getMessage(state) { return state.route.name === 'top' ? `${state.phrases[0]}, ${state.username}` : `${state.phrases[1]}, ${state.username}`; }, }, }); // sync store and router by using `vuex-router-sync` sync(store, router); const app = new Vue({ router, store, }).$mount('#app');

不然的话，你可能需要在vue-router的钩子函数里监听，或在watch里$route，然后修改store值来实现。
四、原理在70多行的vuex-router-sync源代码里有以下几段代码

store.registerModule(moduleName, { namespaced: true, state: cloneRoute(router.currentRoute), mutations: { 'ROUTE_CHANGED': function ROUTE_CHANGED (state, transition) { store.state[moduleName] = cloneRoute(transition.to, transition.from) } } })

首先是在我们的store中注册了一个module,名字默认为route:
【vuex-router-sync如何使用】module中提供了一个叫ROUTE_CHANGED的mutation处理方法,然后还把router对象中的currentRoute保存在了state中,这也是我们为什么能够通过this.$store.state.route拿到currentRoute的原因。
然后就是监听store中的route对象的变化了,当route发生变化并且当前路由名字不等于需要跳转到路由的时候,直接通过router的push方法进行跳转页面：

var storeUnwatch = store.watch( function (state) { return state[moduleName]; }, function (route) { var fullPath = route.fullPath; if (fullPath === currentPath) { return } if (currentPath != null) { isTimeTraveling = true router.push(route) } currentPath = fullPath }, { sync: true } )

store的watch方法跟vue中的watch是一个概念,也就是检测某个属性的变化,然后回调。
最后通过router的全局后置钩子函数监听当前路由对象,修改store中的当前state(当前路由对象)：

// sync store on router navigation var afterEachUnHook = router.afterEach(function (to, from) { if (isTimeTraveling) { isTimeTraveling = false return } currentPath = to.fullPath store.commit(moduleName + '/ROUTE_CHANGED', { to: to, from: from }) })

欢迎关注：https://www.fenxianglu.cn/