Vue 3 + Typescript + Vuex + DevExtreme 的反应性问题

Question

我正在实现一个用作搜索引擎的组件，也就是说，对于我在输入中插入的每个字符，都必须向后面发出请求并且必须更新结果。我正在使用自动完成来实现它，结果将是我将在下面显示的结果：

我通过 mock 背面返回的对象得到这张图片。如果我从 vuex 模块执行相同的过程，我不会得到结果。

我遵循的步骤如下。首先我实现了Vuex模块如下：

export type State = {
    results: any[]
}

const state: State = {
    results: [],
}

const mutations: MutationTree<State> = {
    SET_RESULTS(state: any, payload: any) {
        state.results = payload.resultsByType;
        console.log(state.results)
    }
}

const actions: ActionTree<State, any> = {
    async getResults({ commit }: any, query: string) {
        await itiHttpService.get(API.documents + '/search/' + query, null, false).then((res: any) => {
            commit('SET_RESULTS', res);
        });
    },
}

const getters: GetterTree<State, any> = {
    results: (state: any) => state.results,
}

const searchModule = {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

export default searchModule;

我在突变上设置的 console.log 为每个控制台提供以下结果：

setup(){ 
...
let resultsValue: ResultFilterDto[] = [];
const results = computed(() => { return store.state['searchModule'].results });

function valueChangedGetResults(e: any) {
    var textWrited = e.value;
    if (textWrited !== null && textWrited !== undefined && textWrited.length >= minQueryLength) {
        store.dispatch('searchModule/getResults', textWrited);
    }
}

watch(
    results,
    () => {
        resultsValue = results.value;
        console.log(resultsValue);
        }
);
        
...

从我的组件中，我创建了一个计算属性来访问我的商店的状态信息，然后我创建了一个手表来观察发生的变化。我还有 valueChangedGetResult 方法，每次我输入一个超过 3 个字符的单词时，都会执行调度以查询后面。后面的查询正常完成，结果信息更新在resultsValue中，因为它从控制台获取所有信息。

我的html中的代码如下。

我解释自动完成的方式不起作用并且没有显示任何结果，但是，如果我像下面这样模拟对象并将变量 test 放入 HTML 的数据源中，它就可以工作。我究竟做错了什么？非常感谢！

var test: any = [{
            key: 'Inbox',
            items: [{
                id: 17,
                name: "test1.txt",
                extension: null,
                summary: "Name: test1.txt\tInboxName: Inbox 1\t",
                highLigths: "Name: <span style='font-weight:bold'>test</span>1.txt  \r\n",
                creationDate: "0001-01-01T00:00:00Z",
                inboxName: "Inbox 1",
                inboxId: 1,
                folderId: 0,
                folderName: null,
                categoryId: 0,
                categoryName: null,
                typeId: 0,
                typeName: null,
                subTypeId: 0,
                subTypeName: null
            },
            {
                id: 17,
                name: "test1.txt",
                extension: null,
                summary: "Name: test1.txt\tInboxName: Inbox 1\t",
                highLigths: "Name: <span style='font-weight:bold'>test</span>1.txt  \r\n",
                creationDate: "0001-01-01T00:00:00Z",
                inboxName: "Inbox 1",
                inboxId: 1,
                folderId: 0,
                folderName: null,
                categoryId: 0,
                categoryName: null,
                typeId: 0,
                typeName: null,
                subTypeId: 0,
                subTypeName: null
            }
            ]
        }, {
            key: 'Archive',
            items: [{
                id: 17,
                name: "test1.txt",
                extension: null,
                summary: "Name: test1.txt\tInboxName: Inbox 1\t",
                highLigths: "Name: <span style='font-weight:bold'>test</span>1.txt  \r\n",
                creationDate: "0001-01-01T00:00:00Z",
                inboxName: "Inbox 1",
                inboxId: 1,
                folderId: 0,
                folderName: null,
                categoryId: 0,
                categoryName: null,
                typeId: 0,
                typeName: null,
                subTypeId: 0,
                subTypeName: null
            }]
        }];

Answer 1

主要问题是您在模板中使用resultsValue 变量，但它不是反应式的......它只是普通数组。更改它不会重新渲染模板...

您可以通过let resultsValue = ref<ResultFilterDto[]>([]); 修复它（不要忘记从vue 导入ref）并将分配更改为resultsValue.value = results.value

但是您根本不需要 resultsValue 变量。你已经有了一个响应式computed 值results。因此，只需从您的代码中删除 resultsValue 并在模板中使用 results....

setup(){ 

  const results = computed(() => { return store.state['searchModule'].results });

  function valueChangedGetResults(e: any) {
    var textWrited = e.value;
    if (textWrited !== null && textWrited !== undefined && textWrited.length >= minQueryLength) {
        store.dispatch('searchModule/getResults', textWrited);
    }
  }

  return {
    results
  }     
}