fix: fix that cannot access computed by this.requestStates.computedValue

alovajs · Jul 18, 2024 · 8d6600a · 8d6600a
1 parent 58c744e
commit 8d6600a
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 185 deletions.
diff --git a/packages/shared/src/function.ts b/packages/shared/src/function.ts
@@ -499,7 +499,6 @@ export function statesHookHelper<AG extends AlovaGenerics>(
               referingObject.trackedKeys[key] = trueValue;
               return isFrameworkState ? value.e : value;
             },
-            set: noop,
             enumerable: trueValue,
             configurable: trueValue
           });

diff --git a/packages/vue-options/src/mapAlovaHook.ts b/packages/vue-options/src/mapAlovaHook.ts
@@ -1,4 +1,5 @@
 import { isPlainObject } from '@alova/shared/function';
+import { ObjectCls } from '@alova/shared/vars';
 import { computed, reactive, version } from 'vue';
 import { UseHookCallers, UseHookMapGetter, VueHookMapperMixin } from '~/typings';
 import { classifyHookExposure, extractWatches } from './helper';
@@ -44,9 +45,23 @@ export default <UHC extends UseHookCallers>(mapGetter: UseHookMapGetter<UHC>) =>
         myAssert(/^3|2\.7/.test(version), 'please upgrade vue to `2.7.x` or `3.x`');
 
         // 挂载响应式状态和计算属性
-        vm[dataKey] = reactive(states);
+        const proxy = {};
+        vm[dataKey] = proxy;
+        const rectiveStates = reactive(states);
+        for (const key in states) {
+          ObjectCls.defineProperty(proxy, key, {
+            get: () => rectiveStates[key],
+            set: value => {
+              rectiveStates[key] = value;
+              return value;
+            }
+          });
+        }
         for (const key in computeds) {
-          vm[dataKey][key] = computed(() => computeds[key]());
+          const computedState = computed(computeds[key]);
+          ObjectCls.defineProperty(proxy, key, {
+            get: () => computedState.value
+          });
         }
 
         // 设置watchers

diff --git a/packages/vue-options/test/components/Pagination.vue b/packages/vue-options/test/components/Pagination.vue
@@ -6,8 +6,8 @@
     <span role="pageCount">{{ paging.pageCount }}</span>
     <span role="total">{{ paging.total }}</span>
     <span role="isLastPage">{{ paging.isLastPage }}</span>
-    <span role="response">{{ JSON.stringify(paging.data) }}</span>
-    <span role="error">{{ paging.error?.message }}</span>
+    <span role="response">{{ stringify(paging.data) }}</span>
+    <span role="error">{{ paging.error ? paging.error.message : ' }}</span>
     <button
       role="setPage"
       @click="paging$update({ page: paging.page + 1 })">
@@ -20,7 +20,7 @@
     </button>
     <button
       role="setLastPage"
-      @click="paging.page = paging.pageCount || 1">
+      @click="handleSetLastPage">
       btn3
     </button>
   </div>
@@ -44,6 +44,14 @@ export default {
     return {
       paging: usePagination(this.getter, this.paginationConfig)
     };
-  })
+  }),
+  methods: {
+    stringify(data) {
+      return JSON.stringify(data);
+    },
+    handleSetLastPage() {
+      this.paging.page = this.paging.pageCount;
+    }
+  }
 };
 </script>