मैं जाना जाता है, vuex-router-sync सिर्फ store और डेवलपर के लिए route सिंक route के रूप में bellow पढ़ सकते हैंक्या vuex-राउटर-सिंक के लिए है?
store.state.route.path
store.state.route.params
हालांकि, मैं भी this.$route जो अधिक संक्षिप्त है द्वारा route संभाल कर सकते हैं।
कौन सा दृश्य मैं इसे ज़रूरत है?
यहां मेरे दो सेंट हैं। यदि आप अपने प्रोजेक्ट में इसका उपयोग केस नहीं समझ पा रहे हैं, तो आपको vuex-router-sync आयात करने की आवश्यकता नहीं है, लेकिन आप इसे route ऑब्जेक्ट का उपयोग करने की कोशिश कर रहे हैं, तो vuex की विधि (this.$route vuex के दायरे में अच्छी तरह से काम नहीं करेगा) ।
मैं यहाँ एक उदाहरण देना चाहते हैं।
मान लीजिए कि आप एक घटक में एक संदेश दिखाना चाहते हैं। उपयोगकर्ता के ब्राउज़िंग शीर्ष पृष्ठ पर Welcome back, Jack को प्रदर्शित करने के मामले को छोड़कर, आप लगभग हर पृष्ठ में Have a nice day, Jack जैसे संदेश प्रदर्शित करना चाहते हैं।
आप आसानी से vuex-router-sync की मदद से इसे प्राप्त कर सकते हैं।
const Top = {
template: '<div>{{message}}</div>',
computed: {
message() {
return this.$store.getters.getMessage;
}
},
};
const Bar = {
template: '<div>{{message}}</div>',
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');
// vuex-router-sync source code pasted here because no proper cdn service found
function sync(store, router, options) {
var moduleName = (options || {}).moduleName || 'route'
store.registerModule(moduleName, {
namespaced: true,
state: cloneRoute(router.currentRoute),
mutations: {
'ROUTE_CHANGED': function(state, transition) {
store.state[moduleName] = cloneRoute(transition.to, transition.from)
}
}
})
var isTimeTraveling = false
var currentPath
// sync router on store change
store.watch(
function(state) {
return state[moduleName]
},
function(route) {
if (route.fullPath === currentPath) {
return
}
isTimeTraveling = true
var methodToUse = currentPath == null ?
'replace' :
'push'
currentPath = route.fullPath
router[methodToUse](route)
}, {
sync: true
}
)
// sync store on router navigation
router.afterEach(function(to, from) {
if (isTimeTraveling) {
isTimeTraveling = false
return
}
currentPath = to.fullPath
store.commit(moduleName + '/ROUTE_CHANGED', {
to: to,
from: from
})
})
}
function cloneRoute(to, from) {
var clone = {
name: to.name,
path: to.path,
hash: to.hash,
query: to.query,
params: to.params,
fullPath: to.fullPath,
meta: to.meta
}
if (from) {
clone.from = cloneRoute(from)
}
return Object.freeze(clone)
}.router-link-active {
color: red;
}<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<div id="app">
<p>
<router-link to="/top">Go to Top</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>आप देख सकते हैं, घटक अच्छी तरह से vuex और vue-router के तर्क से decoupled रहे हैं।
यह पैटर्न कभी-कभी इस मामले के लिए वास्तव में प्रभावी ढंग से काम करता है कि आप वर्तमान मार्ग और वीएक्सएक्स गेटटर से लौटाए गए मूल्य के बीच संबंधों के बारे में चिंतित नहीं हैं।