リアクティブな状態をreactiveで宣言している箇所についてrefに変更 (#1913)

AlesInfiny · Jan 29, 2025 · 505ab6f · 505ab6f
1 parent 0f284bd
commit 505ab6f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 59 deletions.
diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/CarouselSlider.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/CarouselSlider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -13,60 +13,58 @@ const props = defineProps<{
 
 const MOVE_THRESHOLD = 30;
 
-const state = reactive({
-  hasItems: true,
-  currentIndex: 0,
-  startX: null as number | null,
-  diffX: 0,
-});
+const hasItems = ref(true);
+const currentIndex = ref(0);
+const startX = ref<number | null>(null);
+const diffX = ref(0);
 
 const nextSlide = () => {
-  state.currentIndex =
-    (state.currentIndex + 1 + props.items.length) % props.items.length;
+  currentIndex.value =
+    (currentIndex.value + 1 + props.items.length) % props.items.length;
 };
 
 const prevSlide = () => {
-  state.currentIndex =
-    (state.currentIndex - 1 + props.items.length) % props.items.length;
+  currentIndex.value =
+    (currentIndex.value - 1 + props.items.length) % props.items.length;
 };
 
 const selectSlide = (index: number) => {
-  state.currentIndex = index;
+  currentIndex.value = index;
 };
 
 const getItem = (index: number) => {
   return props.items[(index + props.items.length) % props.items.length];
 };
 
 const onTouchMove = (event: MouseEvent | TouchEvent) => {
-  if (state.startX == null) {
+  if (startX.value == null) {
     return;
   }
   const currentX =
     'touches' in event ? event.touches[0].clientX : event.clientX;
-  state.diffX = currentX - state.startX;
+  diffX.value = currentX - startX.value;
 };
 
 const onTouchEnd = () => {
-  if (state.startX == null) {
+  if (startX.value == null) {
     return;
   }
-  if (state.diffX > MOVE_THRESHOLD) {
+  if (diffX.value > MOVE_THRESHOLD) {
     prevSlide();
-  } else if (state.diffX < -MOVE_THRESHOLD) {
+  } else if (diffX.value < -MOVE_THRESHOLD) {
     nextSlide();
   }
-  state.startX = null;
-  state.diffX = 0;
+  startX.value = null;
+  diffX.value = 0;
 };
 
 const onTouchStart = (event: MouseEvent | TouchEvent) => {
-  state.startX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+  startX.value = 'touches' in event ? event.touches[0].clientX : event.clientX;
 };
 
 onMounted(() => {
   if (props.items.length === 0) {
-    state.hasItems = false;
+    hasItems.value = false;
     return;
   }
   window.addEventListener('mousemove', onTouchMove);
@@ -84,7 +82,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <template v-if="state.hasItems">
+  <template v-if="hasItems">
     <div data-test="body" class="container">
       <div
         class="flex justify-center items-center"
@@ -97,15 +95,15 @@ onBeforeUnmount(() => {
           @click="prevSlide"
         />
         <template v-for="index in props.items.length">
-          <template v-if="index === state.currentIndex + 1">
+          <template v-if="index === currentIndex + 1">
             <div
               :key="index"
               data-test="slider"
               :style="{
-                transform: `translate3d(${state.diffX}px, 0, 0)`,
+                transform: `translate3d(${diffX}px, 0, 0)`,
               }"
             >
-              <slot v-bind="{ item: getItem(state.currentIndex) }"></slot>
+              <slot v-bind="{ item: getItem(currentIndex) }"></slot>
             </div>
           </template>
         </template>
@@ -117,10 +115,10 @@ onBeforeUnmount(() => {
       </div>
       <div class="flex justify-center">
         <template v-for="index in props.items.length" :key="index">
-          <template v-if="index === state.currentIndex + 1">
+          <template v-if="index === currentIndex + 1">
             <MinusSmallIcon class="h-10 w-10 text-gray-500"></MinusSmallIcon>
           </template>
-          <template v-if="index !== state.currentIndex + 1">
+          <template v-if="index !== currentIndex + 1">
             <MinusSmallIcon
               class="h-10 w-10 text-gray-300"
               data-test="page-indicator"

diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/NotificationToast.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/NotificationToast.vue
@@ -6,11 +6,9 @@ import {
   ExclamationCircleIcon,
   XMarkIcon,
 } from '@heroicons/vue/24/outline';
-import { reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 
-const state = reactive({
-  show: false,
-});
+const show = ref(false);
 
 const notificationStore = useNotificationStore();
 const { id, title, message, detail, status, timeout } =
@@ -20,13 +18,13 @@ const copy = (text: string) => {
 };
 
 const close = () => {
-  state.show = false;
+  show.value = false;
   notificationStore.clearMessage();
 };
 
 watch(message, (newMessage) => {
   if (newMessage !== '') {
-    state.show = true;
+    show.value = true;
     setTimeout(() => {
       close();
     }, timeout.value);
@@ -42,7 +40,7 @@ watch(message, (newMessage) => {
     leave-active-class="transition duration-300"
   >
     <div
-      v-if="state.show"
+      v-if="show"
       class="fixed inline-flex items-center w-5/6 inset-x-0 mx-auto mt-2 p-4 text-gray-500 bg-red-500 rounded-lg shadow"
     >
       <div

diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import {
   fetchBasket,
   removeItemFromBasket,
@@ -18,9 +18,7 @@ import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-h
 import { errorMessageFormat } from '@/shared/error-handler/error-message-format';
 import { HttpError } from '@/shared/error-handler/custom-error';
 
-const state = reactive({
-  showLoading: true,
-});
+const showLoading = ref(true);
 
 const basketStore = useBasketStore();
 const { getBasket, getAddedItem, getAddedItemId } = storeToRefs(basketStore);
@@ -103,7 +101,7 @@ const order = () => {
 };
 
 onMounted(async () => {
-  state.showLoading = true;
+  showLoading.value = true;
   try {
     await fetchBasket();
   } catch (error) {
@@ -130,7 +128,7 @@ onMounted(async () => {
       },
     );
   } finally {
-    state.showLoading = false;
+    showLoading.value = false;
   }
 });
 
@@ -141,8 +139,8 @@ onUnmounted(async () => {
 
 <template>
   <div class="container mx-auto my-4 max-w-4xl">
-    <Loading :show="state.showLoading"></Loading>
-    <div v-if="!state.showLoading">
+    <Loading :show="showLoading"></Loading>
+    <div v-if="!showLoading">
       <div v-if="getAddedItemId && !!getAddedItem" class="mx-2">
         <span class="text-lg font-medium text-green-500">
           {{ t('addedItemsToBasket') }}

diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import {
   fetchCategoriesAndBrands,
   fetchItems,
@@ -28,13 +28,11 @@ const { getCategories, getBrands, getItems, getBrandName } =
 const router = useRouter();
 const customErrorHandler = useCustomErrorHandler();
 const { t } = i18n.global;
-const state = reactive({
-  selectedCategory: 0,
-  selectedBrand: 0,
-  showLoading: true,
-});
 
-const { selectedCategory, selectedBrand } = toRefs(state);
+const selectedCategory = ref(0);
+const selectedBrand = ref(0);
+const showLoading = ref(true);
+
 const { toCurrencyJPY } = currencyHelper();
 const { getFirstAssetUrl, getAssetUrl } = assetHelper();
 
@@ -69,7 +67,7 @@ const addBasket = async (catalogItemId: number) => {
 };
 
 onMounted(async () => {
-  state.showLoading = true;
+  showLoading.value = true;
   fetchCategoriesAndBrands();
   try {
     await fetchItems(selectedCategory.value, selectedBrand.value);
@@ -97,7 +95,7 @@ onMounted(async () => {
       },
     );
   }
-  state.showLoading = false;
+  showLoading.value = false;
 });
 
 watch([selectedCategory, selectedBrand], async () => {
@@ -107,8 +105,8 @@ watch([selectedCategory, selectedBrand], async () => {
 
 <template>
   <div class="container mx-auto">
-    <Loading :show="state.showLoading"></Loading>
-    <div v-if="!state.showLoading">
+    <Loading :show="showLoading"></Loading>
+    <div v-if="!showLoading">
       <div class="flex justify-center m-4">
         <CarouselSlider :items="getSpecialContents" class="h-auto w-full">
           <template #default="{ item }">

diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/ordering/DoneView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/ordering/DoneView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, toRefs } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { i18n } from '@/locales/i18n';
 import { getOrder } from '@/services/ordering/ordering-service';
@@ -16,11 +16,9 @@ const customErrorHandler = useCustomErrorHandler();
 const props = defineProps<{
   orderId: number;
 }>();
-const state = reactive({
-  lastOrdered: null as OrderResponse | null,
-});
 
-const { lastOrdered } = toRefs(state);
+const lastOrdered = ref<OrderResponse>();
+
 const { toCurrencyJPY } = currencyHelper();
 const { getFirstAssetUrl } = assetHelper();
 const { t } = i18n.global;
@@ -31,7 +29,7 @@ const goCatalog = () => {
 
 onMounted(async () => {
   try {
-    state.lastOrdered = await getOrder(props.orderId);
+    lastOrdered.value = await getOrder(props.orderId);
   } catch (error) {
     customErrorHandler.handle(
       error,