全局状态

全局状态这个问题呢，有不同的说法。

官方推荐的，专门用于全局状态管理的工具叫做 pinia。

但是呢，vue3 提供了 hooks 的概念，也可以用于简单的全局状态管理。

这里呢，笔者根据从业近 10 年的经验来说，更推荐使用 pinia 的方式。

专业的事情，交给专业的工具去做。

vue3 的 hooks 是可以解决简单的 全局状态 管理问题。

但是，从项目整体来说，pinia 显然更合适。

主观意识问题

官方推荐的全局状态管理工具，任何水平的 vue 程序员都清楚，更易于理解。

千人千面问题

不同的人，使用 hooks 的方式不一定是完全一致的，但是 pinia 本身已经提供了一致的用法和写法。

这种 约定 好的概念，更利于合作和开发。

所以，yite-cli 脚手架内置了已经配置好的 pinia 全局状态管理方式，开箱即用。

全局状态的定义，位于项目的 src/plugins/useGlobal.js 文件中。

全局状态的定义如下：

javascript

export const useGlobal = Pinia.defineStore('global', () => {
    // 全局数据
    const $GlobalData = $ref({
        appConfig: {
            name: '随易科技'
        },
        // 用户令牌
        token: $Storage.local.get('token') || '',
        // 用户数据
        userData: $Storage.local.get('userData') || {}
    });

    // 全局计算数据
    const $GlobalComputed = {};

    // 全局方法
    const $GlobalMethod = {};

    return {
        $GlobalData,
        $GlobalComputed,
        $GlobalMethod
    };
});

使用方法：

vue

<script setup>
// 外部集

// 内部集

// 选项集
defineOptions({
    name: 'default'
});

// 全局集
const { $GlobalData, $GlobalComputed, $GlobalMethod } = useGlobal();

// 数据集
const $Data = $ref({
    isShow: {}
});

// 方法集
const $Method = {
    async initData() {},
    onLogout() {
        $Storage.clearAll();
        $GlobalData.token = '';
        $GlobalData.userData = {};
        $Router.push('/login');
    }
};
</script>

在 script setup 中，直接获取即可，不需要导入 useGlobal.js 文件，yite-cli 已经默认导入了。

全局状态 ​

全局状态