Vuex传值

当你需要在Vue.js应用中使用Vuex来管理状态，并且需要在组件之间进行数据传递时，可以按照以下步骤进行：

设置Vuex Store

首先，在你的Vue.js应用中设置一个Vuex Store来管理状态。你可以定义状态、mutations和actions等来实现状态的更新和管理。

// searchStore.js

import { ref } from 'vue';

// 定义搜索结果的状态
export const searchResults = ref([]);

// 定义更新搜索结果的方法
export function setSearchResults(newResults) {
    // 对传入的新结果进行处理并更新状态
    searchResults.value = newResults.map(article => ({
        // 对文章数据进行处理
    }));
    // 可以在这里执行其他操作，比如对结果进行排序等
}

在组件中使用Vuex

在需要搜索文章的组件中，你可以调用setSearchResults来更新搜索结果。这里我们假设searchArticles是一个异步函数用来获取搜索结果。

// Header.vue

import { setSearchResults } from '@/vuex/searchStore';

async searchArticles() {
    if (this.searchQuery.trim() === '') {
        return; // 如果 searchQuery 为空，不执行搜索
    }
    try {
        // 发起异步请求获取搜索结果
        const response = await axios.get('/articles/search/', {
            params: {
                query: this.searchQuery,
            },
            // 设置请求头
            headers: {
                // 添加令牌到请求头
            },
        });
        // 更新搜索结果到Vuex Store
        setSearchResults(response.data);
        console.log(response.data);
    } catch (error) {
        console.error('Error searching articles:', error);
    }
}

在其他组件中获取状态

在其他组件中，你可以直接获取Vuex Store中的状态来显示数据。

// Home.vue

import { searchResults } from '@/vuex/searchStore';

export default {
    computed: {
        displayedArticles() {
            // 获取搜索结果
            const searchResultsValue = searchResults.value;
            // 根据需要对搜索结果进行处理并返回
            return searchResultsValue;
        }
    }
};

总结

通过使用Vuex管理状态，在Vue.js应用中实现了跨组件的数据传递。这种方式使得组件之间的通信更加简单，同时也使得状态的管理更加集中和可控。通过明确定义状态和状态更新的方法，可以提高代码的可维护性和可扩展性，从而更好地组织和管理你的Vue.js应用。