反应性和计算属性的问题 Vue 3 - 组合 API

Question

原则上我有这个菜单：

具有以下路径的项目 1（编号 1 涂成橙色）：http://localhost:8080/#/documents

项目 2（编号 2 涂成橙色），路径如下： http://localhost:8080/#/documents/1

以及具有以下路径的项目 3（编号 3 涂成橙色）： http://localhost:8080/#/documents/2

例如，当我单击第 2 项时，标有蓝色框的组合框应设置为默认值，表中的项目应按此值过滤，如下面的屏幕截图所示：

所以我想要的是，当我单击第 1 项时，我可以根据我在组合中选择的过滤器过滤或不过滤表格将向我显示的值。为此，我创建了以下方法和属性：

let route = useRoute();
let filter = computed({
            get: () => {
                console.log('get');
                return createFilter(route.params);
            },
            set: (newValue: any) => {
                console.log('set');
                route.params = newValue;
            },
        });

当我们从子组件接收到要应用的过滤器时，就会执行此方法。

function onEventFiltersForGrid(filters: any) {
            filter.value = filters;
        }

我创建过滤器的方法如下：

function createFilter(routeParams: any) {
            console.log(routeParams);
            if (routeParams.folderId === undefined || routeParams.folderId === '') {
                console.log('primer if');
                return [filterCategoryFolderId, '<>', null];
            }
            else if (routeParams.id !== undefined && routeParams.id !== '' && routeParams.id !== isNaN) {
                console.log('segundo if');
                return [
                    [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)],
                    'and',
                    [filterId, '=', Number.parseInt(routeParams.id)]
                ];
            }
            else {
                console.log('else');
                return [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)];
            }
        }

我遇到的问题是，当我在组合中选择一个项目来构建表的新过滤时，我收到以下错误：写入操作失败：计算值是只读的

我附上html代码：

<div>
    <document-list :filter="filter" :showFolder="true" :showCategory="true" :showType="true" :showSubType="true">
        <!-- Filtros -->
        <filter-hierarchy @EventFiltersForGrid="onEventFiltersForGrid($event)" :archivedId="archivedId"></filter-hierarchy>
    </document-list>
</div>

Answer 1

您收到的错误消息是因为默认情况下计算的是 getter。

在具有独立计算的 setup() 中，它们显示以下示例： Example

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0 

• 那么，你在哪里定义 ref()？
• 你可以通过 .value 获取 ref 的值

---

Options API 中像这样计算的 getter/setter：

let filter = computed({
            get() {
                console.log('get');
                return createFilter(route.params);
            },
            set(newValue: any) {
                console.log('set');
                route.params = newValue;
            },
        });