How do I integrate Vue Router with Vuex?

How do I integrate Vue Router with Vuex?

To integrate Vue Router with Vuex, you can use Vuex to manage the state of your application and Vue Router to handle navigation. First, ensure both libraries are installed and set up in your Vue project.

Can you give me a code example?

Sure! Here's a simple example:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';

Vue.use(VueRouter);
Vue.use(Vuex);

const store = new Vuex.Store({
  state: { user: null },
  mutations: { setUser(state, user) { state.user = user; } }
});

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/profile', component: Profile }
  ]
});

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app');

This sets up a basic Vue application with Vue Router and Vuex.

How do I access Vuex state in my components?

You can access Vuex state in your components using the mapState helper from Vuex. Here's an example:

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user'])
  }
};

This will allow you to use this.user in your component to access the user state.