npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@gsp-sys/stores

v0.0.6

Published

共享状态管理库

Downloads

216

Readme

@gsp-sys/stores

共享状态管理库,基于Pinia实现,为微应用框架提供统一的状态管理解决方案。

导出的Store

useTabsStore

标签页管理Store,用于管理应用中的标签页状态。

状态:

  • activeTab - 当前激活的标签页
  • tabsList - 所有标签页列表
  • installAppMap - 已安装的应用映射
  • keepAliveList - 需要保持状态的页面
  • globalData - 全局数据,包括:
    • number - 数值
    • showTabBar - 是否显示标签栏(仍保留在tabsStore中)

使用方法:

import { useTabsStore } from '@gsp-sys/stores';

const tabsStore = useTabsStore();

// 获取激活的标签页
const activeTab = tabsStore.activeTab;

// 获取所有标签页
const allTabs = tabsStore.tabsList;

// 获取全局数据
const globalData = tabsStore.globalData;

useContextStore

公共上下文存储,用于管理应用的公共上下文信息,包括国际化和主题变量。

状态:

  • currentLocale - 当前语言代码('zh'或'en')
  • primaryColor - 主题主色
  • globalContextData - 全局上下文数据,包括:
    • theme_primary_color - 主题主色
    • language - 当前语言
    • themeName - 主题名称
  • isInitialized - 是否已初始化

计算属性:

  • locale - 当前语言(别名)
  • primaryColorValue - 主题主色(别名)
  • globalData - 全局数据(别名)
  • currentTheme - 当前主题名称

方法:

  • setLocale(locale) - 设置当前语言
  • updateLanguage(lang) - 更新语言(兼容原方法名)
  • setPrimaryColor(color) - 设置主题主色
  • initContext() - 初始化上下文设置

使用方法:

import { useContextStore } from '@gsp-sys/stores';

const contextStore = useContextStore();

// 设置语言
contextStore.setLocale('en');

// 更新语言(兼容方法)
contextStore.updateLanguage('zh');

// 设置主题主色
contextStore.setPrimaryColor('#2A87FF');

// 获取当前语言
const currentLang = contextStore.currentLocale;

useUserStore

用户状态Store,用于管理用户相关的状态。

状态:

  • userInfo - 用户信息
  • token - 认证令牌

计算属性:

  • isLoggedIn - 是否已登录
  • hasRole(role) - 检查用户是否拥有指定角色

方法:

  • login(token, userInfo) - 登录
  • logout() - 登出
  • updateUserInfo(info) - 更新用户信息

使用方法:

import { useUserStore } from '@gsp-sys/stores';

const userStore = useUserStore();

// 登录
userStore.login('token-value', { id: '1', name: 'User', roles: ['admin'] });

// 检查是否登录
if (userStore.isLoggedIn) {
  // 执行登录后的操作
}

// 检查权限
if (userStore.hasRole('admin')) {
  // 显示管理员功能
}

// 登出
userStore.logout();

注意事项

  • 所有Store都使用Composition API风格定义
  • 使用前确保已在应用中正确安装和配置Pinia
  • 跨包使用时,确保已通过workspace协议正确安装依赖