# Global Variable | 使用 Tango 构建你的低代码生产力工具
TangoBoot provides a global singleton mode by default, which means that you can always use this global singleton to access necessary application runtime information in your project.

Skip to main content
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# Global Variable

TangoBoot provides a global singleton mode by default, which means that you can always use this global singleton to access necessary application runtime information in your project.

tip

Singleton means a single instance, also called "singleton pattern," which is a common design pattern. It limits the number of times a class can be instantiated to only once, so that a class has only one instance and provides a global access point to it. In the context of TangoBoot, "singleton" means that your application will always have only one instance of TangoBoot, and you can consistently obtain application-to-runtime information through this single instance.

## Get the global variable​

    // case1: get from package
    import tango from '@music163/tango-boot';

    // case2: get from window
    window.tango;

    // both are the same
    console.log(tango === window.tango); // true

### Get data from the global `tango` variable​

    // tango
    {
      // custom configs
      config: {},

      // custom helper functions
      helpers: {},

      // History
      history: History;

      // service functions
      services: {},

      // store instances
      stores: {},

      // builtin helpers
      closeModal: Function;
      openModal: Function;
      setStoreValue: Function;
      getStoreValue: Function;
      // ...
    }

## Usage Guide​

### Use in store​

    import tango, { defineModel } from '@music163/tango-boot';

    export default defineModel(
      {
        title: 'hello',

        async listUsers() {
          const data = await tango.services.listUsers();
          this.title = data;
        },
      },
      'app'
    );

### Use in page runtime​

    import tango, { definePage } from '@music163/tango-boot';

    function App() {
      return (
        <Box>
          {tango.stores.app.title}

          <Button onClick={tango.services.list}>request</Button>
        </Box>
      );
    }

    export default definePage(App);