vuex do not mutate vuex store state outside mutation handlers. nuxt

1. Define State in Vuex Store:
2. Create a Vuex store using createStore function.
3. Define the state object inside the store with the required properties.

// store/index.js
import { createStore } from 'vuex';

export const store = createStore({
  state: {
    // Define your state properties here
    exampleProperty: null,
  },
  // Other store configurations...
});

1. Mutations for State Mutation:
2. Declare mutation functions to modify the state properties.
3. Mutations must be synchronous and should not directly call API or perform asynchronous operations.

// store/index.js
export const store = createStore({
  state: {
    exampleProperty: null,
  },
  mutations: {
    // Mutation to update exampleProperty
    setExampleProperty(state, newValue) {
      state.exampleProperty = newValue;
    },
  },
  // Other store configurations...
});

1. Actions for Asynchronous Operations:
2. Create actions to handle asynchronous operations, API calls, or complex logic.
3. Actions can commit mutations to modify the state.

// store/index.js
export const store = createStore({
  state: {
    exampleProperty: null,
  },
  mutations: {
    setExampleProperty(state, newValue) {
      state.exampleProperty = newValue;
    },
  },
  actions: {
    // Action to update exampleProperty asynchronously
    async updateExampleProperty({ commit }, newValue) {
      // Perform asynchronous operations or API calls
      // Example: const response = await api.updateExampleProperty(newValue);

      // Commit the mutation to update the state
      commit('setExampleProperty', newValue);
    },
  },
  // Other store configurations...
});

1. Component Interaction:
2. In a component, dispatch actions to update the state asynchronously.

// components/ExampleComponent.vue
export default {
  methods: {
    // Dispatch the action to update exampleProperty
    async updateProperty(value) {
      await this.$store.dispatch('updateExampleProperty', value);
    },
  },
};

1. Getters for State Access:
2. Define getters to retrieve state properties with possible transformations.

// store/index.js
export const store = createStore({
  state: {
    exampleProperty: null,
  },
  mutations: {
    setExampleProperty(state, newValue) {
      state.exampleProperty = newValue;
    },
  },
  actions: {
    async updateExampleProperty({ commit }, newValue) {
      // Perform asynchronous operations or API calls
      commit('setExampleProperty', newValue);
    },
  },
  getters: {
    // Getter to access exampleProperty
    getExampleProperty: (state) => state.exampleProperty,
  },
  // Other store configurations...
});

1. Component Access to State using Getters:
2. In a component, use getters to access state properties.

// components/ExampleComponent.vue
export default {
  computed: {
    // Access exampleProperty through the getter
    exampleProperty() {
      return this.$store.getters.getExampleProperty;
    },
  },
};

1. Strict Mode in Vuex:
2. Enable strict mode in Vuex to catch mutations outside mutation handlers during development.

// store/index.js
export const store = createStore({
  // Other store configurations...
  strict: process.env.NODE_ENV !== 'production',
});