Typescript Vue 3和x2B的反应性问题；打字脚本+；Vuex+；德维斯特雷

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

我通过模仿背面返回的对象得到了这张图像。如果从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;

从我的组件中，我创建了一个computed属性来访问我的存储的状态信息，然后我创建了一个watch来观察发生的更改。我还有valueChangedGetResult方法，每次我键入一个超过3个字符的单词时，都会执行分派以查询背面。后面的查询正确完成，信息在resultsValue中更新，因为它从控制台获取所有信息

我的html中的代码如下所示

我解释autocomplete的方法不起作用，也不显示任何结果，但是，如果我像下面这样模拟对象，并将其放入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
            }]
        }];

var测试：任何=[{
关键字：“收件箱”，
项目：[{
身份证号码：17，
名称：“test1.txt”，
扩展名：null，
摘要：“名称：test1.txt\tInboxName:Inbox 1\t”，
高亮度：“名称：test1.txt\r\n”，
创建日期：“0001-01-01T00:00:00Z”，
inboxName:“收件箱1”，
氧化铟：1，
folderId:0，
folderName:null，
类别ID:0，
categoryName:null，
typeId:0，
typeName:null，
子类型ID:0，
子类型名称：空
},
{
身份证号码：17，
名称：“test1.txt”，
扩展名：null，
摘要：“名称：test1.txt\tInboxName:Inbox 1\t”，
高亮度：“名称：test1.txt\r\n”，
创建日期：“0001-01-01T00:00:00Z”，
inboxName:“收件箱1”，
氧化铟：1，
folderId:0，
folderName:null，
类别ID:0，
categoryName:null，
typeId:0，
typeName:null，
子类型ID:0，
子类型名称：空
}
]
}, {
关键字：“存档”，
项目：[{
身份证号码：17，
名称：“test1.txt”，
扩展名：null，
摘要：“名称：test1.txt\tInboxName:Inbox 1\t”，
高亮度：“名称：test1.txt\r\n”，
创建日期：“0001-01-01T00:00:00Z”，
inboxName:“收件箱1”，
氧化铟：1，
folderId:0，
folderName:null，
类别ID:0，
categoryName:null，
typeId:0，
typeName:null，
子类型ID:0，
子类型名称：空
}]
}];

主要问题是您在模板中使用了

resultsValue

变量，但它不是被动的……它只是普通数组。更改它不会重新渲染模板

您可以通过

let resultsValue=ref（[]）来修复它（不要忘记从
vue
导入
ref
），并将赋值更改为
resultsValue.value=results.value

但是您根本不需要
resultsValue
变量。您已经计算了一个反应性
值
结果
。因此，只需从代码中删除
resultsValue
，并在模板中使用
results

setup（）{
const results=computed（（）=>{return store.state['searchModule'].results}）；
函数值ChangedGetResults（e:任意）{
var textWrited=e.value；
if（textWrited！==null&&textWrited！==undefined&&textWrited.length>=minQueryLength）{
store.dispatch（'searchModule/getResults'，textWrited）；
}
}
返回{
结果
}     
}

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
            }]
        }];