Vue.js 101 : Completing our Store

Screenshot from the tutorial

Vue.js 101: Completing Our Store

In the world of modern web development, Vue.js stands out as a progressive framework that offers developers an efficient way to build user interfaces and single-page applications. In this tutorial, inspired by the YouTube video "Vue.js 101: Completing our Store," we will explore how to enhance a Vue.js application by completing a store functionality.

Understanding Vue.js

Before diving into the specifics of completing our store, let's take a moment to understand what Vue.js is and why it’s popular among developers.

What is Vue.js?

Vue.js is a JavaScript framework used for building user interfaces. Its core feature is its reactivity system, which allows developers to easily manage and manipulate the state of their applications. Vue.js promotes a component-based architecture, enabling developers to build reusable components that encapsulate both structure and behavior.

Setting Up Your Vue.js Store

To complete our store functionality, we will assume that you already have a basic Vue.js application set up. If you haven’t done that yet, you can create a new Vue project using Vue CLI:

npm install -g @vue/cli
vue create my-vue-store
cd my-vue-store
npm run serve

Installing Vuex

For managing state in our store application, we’ll utilize Vuex, which is Vue's state management library. Vuex helps manage shared state across components in a centralized store. Here’s how to install Vuex:

npm install vuex --save

Creating the Store

With Vuex installed, we can now create our store. In your project, create a new folder called store and add an index.js file:

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    products: [],
    cart: []
  },
  mutations: {
    addProduct(state, product) {
      state.products.push(product);
    },
    addToCart(state, product) {
      state.cart.push(product);
    }
  },
  actions: {
    fetchProducts({ commit }) {
      // Simulating an API call
      const products = [
        { id: 1, name: 'Product 1', price: 100 },
        { id: 2, name: 'Product 2', price: 200 }
      ];
      products.forEach(product => commit('addProduct', product));
    }
  },
  getters: {
    getProducts: state => state.products,
    getCart: state => state.cart
  }
});

export default store;

Explanation of the Store Structure

• State: This holds the application state. In our case, we have an array of products and an array for the shopping cart.

• Mutations: These are synchronous functions that modify the state. We have addProduct to add products to our state and addToCart for adding items to the cart.

• Actions: These can contain asynchronous operations. In our example, fetchProducts simulates an API call to fetch products.

• Getters: These are similar to computed properties and allow us to retrieve state in a more structured way.

Integrating the Store with Vue Components

Now that we have our store set up, we need to connect it with our Vue components. Here’s how we can do that.

Modifying the Main Application File

In your main.js, import the store and pass it to your Vue instance:

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

Creating a Product List Component

Now let's create a component to display our products. Create a new folder called components and add a ProductList.vue file:

<template>
  <div>
    <h1>Product List</h1>
    <div v-for="product in products" :key="product.id">
      <h2>{{ product.name }}</h2>
      <p>Price: ${{ product.price }}</p>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    products() {
      return this.$store.getters.getProducts;
    }
  },
  methods: {
    addToCart(product) {
      this.$store.commit('addToCart', product);
    }
  },
  created() {
    this.$store.dispatch('fetchProducts');
  }
}
</script>

Explanation of the Product List Component

• Template: This section displays a list of products with a button to add each product to the cart.

• Computed Property: The products computed property retrieves the list of products from the Vuex store.

• Methods: The addToCart method commits the addToCart mutation to add a product to the cart.

• Lifecycle Hook: The created hook dispatches the fetchProducts action to load the products when the component is created.

Conclusion

In this tutorial, we have successfully completed a simple store functionality using Vue.js and Vuex. The combination of these powerful tools allows developers to manage state efficiently and create dynamic user interfaces.

Feel free to extend this functionality by adding more features, such as removing items from the cart or implementing a checkout process. As you explore more about Vue.js, you'll find that its flexibility and simplicity help streamline your development process. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios