How to ues Vue3 with Vuex modules

Vue3 with Vuex store example
**

1. Create counter store with modules**

  counter: 0,
};

const getters = {
  getCounter: (state) => state.counter,
};

const mutations = {
  INCREASE(state, countVal) {
    state.counter = countVal;
  },
  DECREASE(state, countVal) {
    state.counter = countVal;
  },
};

const actions = {
  increase({ state, commit }) {
    commit("INCREASE", state.counter + 1);
  },
  decrease({ state, commit }) {
    commit("DECREASE", state.counter - 1);
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};```

**

2. In my counter component**

<template>
  <div>
    <h1>{{ data.text }}</h1>
    <h1>Couter2: {{ data.couter }}</h1>
    <button @click="Increase">Increase</button>
    <button @click="Decrease">Decrease</button>
  </div>
</template>
<script>

import { useCouter2 } from "./useCouter2";
export default {
  setup() {
 
    const { data, Increase, Decrease } = useCouter2();
    return {
      data,
      Increase,
      Decrease,
    };
  },
};
</script>

**

3. using ueCounter.js**

.
import { computed, reactive } from "vue";
import { useStore } from "vuex";

export function useCouter2() {
  const store = useStore();

  const data = reactive({
    text: "Counter Test Using Vuex",
    couter: computed(() => store.getters["counter/getCounter"]),
  });

  function Increase() {
    store.dispatch("counter/increase");
  }
  function Decrease() {
    store.dispatch("counter/decrease");
  }
  return {
    data,
    Increase,
    Decrease,
  };
}

#vue #js #nativescript #javascript