How can you handle and manage the local component state in Vue.js ?

In Vue.js, managing local component state is primarily achieved through the data and computed properties within components. I will provide a detailed explanation of how to effectively manage and handle local component state, along with examples.

Managing State with the data Property

In Vue components, data is a function that returns an object. The properties of this object represent the component's state, which can be used in the template and other parts of the component.

Example:

vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Initial message'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed';
    }
  }
}
</script>

In this example, message represents the local state of the component, which is modified by invoking the changeMessage method upon button click.

Handling Dependencies with the computed Property

When the component's state is derived from other states, the computed property is suitable. The computed property is cached based on its dependencies and recalculates only when those dependencies change.

Example:

vue
<template>
  <div>
    <p>Original price: {{ price }} yuan</p>
    <p>Discounted price: {{ discountedPrice }} yuan</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    }
  },
  computed: {
    discountedPrice() {
      return this.price * (1 - this.discount);
    }
  }
}
</script>

In this example, discountedPrice is a computed property that depends on price and discount. When these dependencies change, discountedPrice automatically updates.

Listening to State Changes with watch

Sometimes, we need to execute actions when a data property changes. This is handled using the watch property, which enables listening to specific data properties and executing defined logic upon changes.

Example:

vue
<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  watch: {
    searchText(newVal, oldVal) {
      console.log(`Search text changed from ${oldVal} to ${newVal}`);
      // Here, you can perform actions like asynchronous data fetching
    }
  }
}
</script>

In this example, whenever searchText changes, the function defined in watch is executed, logging the change from the old value to the new value.

Summary

In Vue.js, managing local component state is accomplished through the combination of data, computed, and watch properties. Choosing the right method for specific needs results in clear and efficient state management.