How do I manage state in Vue 3 using Vuex modules?

How do I manage state in Vue 3 using Vuex modules?

To manage state in Vue 3 with Vuex modules, you can create separate modules for different parts of your state.

Can you show me an example of a Vuex module?

Sure! Here's a simple example:

// store/modules/user.js
export default {
  namespaced: true,
  state: {
    userInfo: null,
  },
  mutations: {
    setUser(state, user) {
      state.userInfo = user;
    },
  },
  actions: {
    fetchUser({ commit }) {
      // Fetch user data and commit mutation
    },
  },
};

How do I register this module in the main store?

You can register the module in your main store like this:

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
  },
});