<!-- ChooseColor.vue -->
<script setup>
import { defineProps } from "vue";
import { useStore } from "vuex";
import { storeData } from "./common";
let { resultColor } = storeData();
const props = defineProps({
selectType: String,
});
const store = useStore();
const updateSelection = (e) => {
store.commit("resultColor/updateResultColor", {
type: props.selectType,
value: e.target.value,
});
};
const isSelectedOption = (type) => {
return props.selectType == type;
};
</script>
I have organized the code above to access the store state separately and store it in a different file.
//common.js
import { computed, reactive, toRefs } from "vue";
import { useStore } from "vuex";
const storeData = () => {
const store = useStore();
let state = reactive({
count: computed(() => store.state.count.count),
resultColor: computed(() => store.state.resultColor.resultColor),
resultList: computed(() => store.state.count.result),
});
return toRefs(state);
};
export { storeData };
By following this approach, I aim to streamline this part of the code.↓
const store = useStore();
const updateSelection = (e) => {
store.commit("resultColor/updateResultColor", {
type: props.selectType,
value: e.target.value,
});
};
I am looking for a way to avoid repetitive use of the useStore function. Is there any solution for this?