Как синхронизировать текущий маршрут в Vuex хранилище?
Синхронизация текущего маршрута в Vuex хранилище полезна для управления состоянием приложения, основанного на маршрутизации. Это позволяет хранить информацию о текущем маршруте в централизованном хранилище, что может быть полезно для доступа к маршруту из различных компонентов вашего приложения.
Шаги для синхронизации маршрута в Vuex
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
currentRoute: ''
},
mutations: {
setCurrentRoute(state, route) {
state.currentRoute = route;
}
},
actions: {
updateCurrentRoute({ commit }, route) {
commit('setCurrentRoute', route);
}
},
getters: {
currentRoute: state => state.currentRoute
}
});
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import store from './store'; // Импортируем Vuex store
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
router.afterEach((to) => {
store.dispatch('updateCurrentRoute', to.path); // Обновляем текущее состояние маршрута в Vuex
});
export default router;
mapGetters или this.$store.getters.<template>
<div>
<h1>Текущий маршрут: {{ currentRoute }}</h1>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['currentRoute']) // Используем Vuex getter
}
}
</script>
Заключение
Теперь у вас есть полнофункциональная система, которая синхронизирует текущий маршрут с Vuex хранилищем. Это дает вам возможность управлять состоянием вашего приложения и позволяет другим компонентам получать доступ к текущему маршруту. Вы можете расширять функциональность, добавляя дополнительные данные в состояние Vuex, такие как параметры маршрута или другие метаданные.