The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Modules in Vuex

Next ►
►

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. As your application grows, you might find that the store becomes too large and difficult to manage. This is where Vuex modules come into play.

What are Vuex Modules?

Vuex modules allow you to divide your store into smaller, manageable pieces. Each module can contain its own state, mutations, actions, getters, and even nested modules. This modular approach helps in organizing the store in a way that is easier to maintain and scale.

Key Concepts of Vuex Modules

  1. State: The data or state of the module.
  2. Getters: Functions to get derived state from the module's state.
  3. Mutations: Synchronous functions to change the state.
  4. Actions: Asynchronous functions that can commit mutations.
  5. Nested Modules: Modules within modules for further organization.

Creating a Vuex Module

Let's create a simple Vuex module for managing a list of products.

Step 1: Define the Module

Create a file named products.js in your store directory.

// store/modules/products.js
const state = {
  products: []
};

const getters = {
  allProducts: (state) => state.products
};

const actions = {
  async fetchProducts({ commit }) {
    const response = await fetch('https://api.example.com/products');
    const data = await response.json();
    commit('setProducts', data);
  }
};

const mutations = {
  setProducts: (state, products) => (state.products = products)
};

export default {
  state,
  getters,
  actions,
  mutations
};

Step 2: Register the Module

In your main store file, import and register the module.

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import products from './modules/products';

Vue.use(Vuex);

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

Step 3: Using the Module in Components

Now you can use the module's state, getters, actions, and mutations in your Vue components.

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters('products', ['allProducts'])
  },
  methods: {
    ...mapActions('products', ['fetchProducts'])
  },
  created() {
    this.fetchProducts();
  }
};
</script>

Nested Modules

Vuex modules can also be nested to further organize your store. For example, you might have a cart module within a shop module.

// store/modules/shop/cart.js
const state = {
  items: []
};

const getters = {
  cartItems: (state) => state.items
};

const actions = {
  addItemToCart({ commit }, item) {
    commit('addItem', item);
  }
};

const mutations = {
  addItem: (state, item) => state.items.push(item)
};

export default {
  state,
  getters,
  actions,
  mutations
};
// store/modules/shop/index.js
import cart from './cart';

export default {
  namespaced: true,
  modules: {
    cart
  }
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import shop from './modules/shop';

Vue.use(Vuex);

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

Practical Exercise

Exercise: Create a User Module

  1. Create a user.js file in the store/modules directory.
  2. Define state, getters, actions, and mutations for managing user information (e.g., name, email).
  3. Register the user module in the main store file.
  4. Use the user module in a Vue component to display and update user information.

Solution

// store/modules/user.js
const state = {
  user: {
    name: '',
    email: ''
  }
};

const getters = {
  userInfo: (state) => state.user
};

const actions = {
  updateUser({ commit }, user) {
    commit('setUser', user);
  }
};

const mutations = {
  setUser: (state, user) => (state.user = user)
};

export default {
  state,
  getters,
  actions,
  mutations
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user
  }
});
<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
    <input v-model="name" placeholder="Name" />
    <input v-model="email" placeholder="Email" />
    <button @click="updateUserInfo">Update</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  computed: {
    ...mapGetters('user', ['userInfo'])
  },
  methods: {
    ...mapActions('user', ['updateUser']),
    updateUserInfo() {
      this.updateUser({ name: this.name, email: this.email });
    }
  },
  created() {
    this.name = this.userInfo.name;
    this.email = this.userInfo.email;
  }
};
</script>

Conclusion

In this section, we learned how to use Vuex modules to organize and manage the state in a Vue.js application. By breaking down the store into smaller, manageable pieces, we can maintain and scale our applications more effectively. We also explored how to create nested modules and use them in Vue components. In the next module, we will dive into more advanced Vuex patterns and techniques.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved