Vuex: taking user input, adding and removing it from state

Are you tired of banging your head against the wall trying to manage state in your VueX application? Fear not, because we're here to save the day! In this article, we'll show you how to add and remove items from state with ease, using nothing but some user input and a sprinkle of magic (okay, maybe not magic, but it's still pretty darn simple). Wait! What did you just say? You said ”simple”? 🫢

Yes, you heard it right! Let's get started and make state management a breeze!💨

I'll walk you through the process step by step, but first I'll provide you a resource on VueX in case you're not familiar with how it all fits together. To continue with this step-by-step guide, you will need to have this knowledge.

📚 Vuex

I have previously written an article on Vuex, how it works and how to add it to your project: https://dev.to/bcostaaa01/how-does-vuex-work-and-what-to-use-it-for-4d8k

I encourage you to also go through Vuex's official documentation: https://vuex.vuejs.org/

You should be prepared to go on to the next stages after reading and having a better knowledge of how Vuex and state management in Vue operate.

👷‍♂️ Set up the main component

Create a Vue component that takes user input and two methods that call the addItem and removeItem mutations in the Vuex store where the form is submitted.

Input.vue

<template>
  <div>
    <form @submit.prevent="addItem">
      <input v-model="newItem" placeholder="Add a new item" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Input",
  data() {
    return {
      newItem: '',
    };
  },
  computed: {
    ...mapState(["items"]),
  },
  methods: {
    addItem() {
        this.$store.dispatch('addItem', this.newItem)
        this.newItem = ''
    },
    removeItem(index) {
        this.$store.dispatch('removeItem', index)
    },
  },
};
</script>

• the form submits the new item to the items state.
• the component has a computed property called items that contains the value of the items state.
• the methods object contains two methods: addItem which dipatches an action which adds a new item to the items state and sets newItem to an empty string, and removeItem, which dispatches an action that removes an item from the items state at the specified index.

👥 Populate the store

Create a Vuex store with an items state, and an addItem and removeItem mutations. Create addItem and removeItem actions that commit the mutations.

index.js

import { createStore } from "vuex";

export default createStore({
  state: {
    items: [],
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
    removeItem(state, index) {
      state.items = state.items.filter((_item, i) => i !== index);
    },
  },
  actions: {
    addItem({ commit }, item) {
      commit("addItem", item);
    },
    removeItem({ commit }, index) {
      commit("removeItem", index);
    },
  }
});

• the addItem mutation adds an item which takes the user input from the form to items.
• the removeItem mutation removes an item based on the specified index from the items state.

👏You are now good to go to manage state based on user input! Easy, right? 😉

You can find a link to the repo I worked on to showcase this process: https://github.com/bcostaaa01/vuex-user-input - it contains the commits which might also help you better understand the process.

Thank you for reading!👋

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

• GitHub: https://github.com/bcostaaa01
• Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻