简单来讲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:
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/
参考链接：