vue nuxt vuex store watch

// 1. Import necessary modules
import { mapState, mapActions, mapMutations } from 'vuex';

// 2. Define the component
export default {
  // 3. Connect component to Vuex store
  computed: {
    ...mapState('moduleName', ['stateProperty']),
  },
  methods: {
    ...mapActions('moduleName', ['actionName']),
    ...mapMutations('moduleName', ['mutationName']),
  },

  // 4. Watch for changes in Vuex store state
  watch: {
    stateProperty(newValue, oldValue) {
      // 5. Handle stateProperty changes
      // You can perform actions when stateProperty changes
    },
  },

  // 6. Lifecycle hook: created
  created() {
    // 7. Dispatch an action when the component is created
    this.actionName();
  },

  // 8. Lifecycle hook: beforeDestroy
  beforeDestroy() {
    // 9. Commit a mutation before the component is destroyed
    this.mutationName();
  },
};