Skip to content

全局状态

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

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

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

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

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

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

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

  1. 主观意识问题

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

  1. 千人千面问题

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

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

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

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

全局状态的定义如下:

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

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

    // 全局方法
    let $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 已经默认导入了。

何以解忧,唯有代码。不忘初心,方得始终。