如何在Polymer中创建可全局访问的单例用户信息静态对象？

Absolutely feasible! In Polymer, there are a couple of straightforward ways to create a singleton-like user info object that's accessible to all your web components without having to pass it around explicitly. Let me break down the most common, practical approaches for you:

方法1：直接挂载到全局window对象（最简单快速） #

This is the quickest way to get up and running. Since all your Polymer components run in the same browser global context, you can initialize a user session object directly on window in your root index.html, and any component can access it anytime.

实现步骤： #

1. 在index.html中添加初始化脚本：

<script>
  // Create a unique-named singleton to avoid global namespace collisions
  window.MyAppUserSession = {
    currentUser: null,
    // Login method to set user data
    login(userData) {
      // Use spread operator to avoid mutating the original object
      this.currentUser = { ...userData };
    },
    // Logout method to clear user data
    logout() {
      this.currentUser = null;
    },
    // Getter to safely retrieve user info
    getUser() {
      return { ...this.currentUser }; // Return a copy to prevent external mutation
    }
  };

  // Example: Initialize with a test user on app load
  MyAppUserSession.login({ id: 456, name: "Jane Smith", email: "jane@example.com" });
</script>

2. 在任意Polymer组件中访问：

// Inside a component's method or template binding
_getGreeting() {
  const user = window.MyAppUserSession.getUser();
  return user ? `Hello, ${user.name}!` : "Hello, Guest!";
}

注意事项：

• 给全局对象起一个独特的名字（比如带你的应用前缀），避免和其他第三方库的全局变量冲突。
• 返回用户数据的副本而不是原对象，防止外部代码意外修改单例内部状态。

方法2：用Polymer Behavior封装（更贴合Polymer架构） #

If you want a more "Polymer-native" approach that integrates with component data binding and lifecycle, using a Behavior is perfect. Behaviors let you share code across components, and we can use a private singleton instance inside the behavior to ensure only one user session exists.

实现步骤： #

1. 创建一个单独的行为文件user-session-behavior.html：

<script>
  // Private singleton instance (only accessible inside this behavior)
  const _privateUserSession = {
    currentUser: null,
    login(userData) {
      this.currentUser = { ...userData };
    },
    logout() {
      this.currentUser = null;
    },
    getUser() {
      return this.currentUser;
    }
  };

  // Define the public behavior for components to use
  Polymer.UserSessionBehavior = {
    properties: {
      // Expose currentUser as a component property for template binding
      currentUser: {
        type: Object,
        value() {
          return _privateUserSession.getUser();
        },
        notify: true // Enables automatic UI updates when user data changes
      }
    },
    methods: {
      // Public login method components can call
      login(userData) {
        _privateUserSession.login(userData);
        // Update the component's property to trigger UI updates
        this.set('currentUser', _privateUserSession.getUser());
      },
      // Public logout method
      logout() {
        _privateUserSession.logout();
        this.set('currentUser', null);
      }
    }
  };
</script>

2. 在需要的组件中导入并使用这个行为：

<link rel="import" href="user-session-behavior.html">

<dom-module id="user-profile-card">
  <template>
    <div class="profile-header">
      <h2>[[currentUser.name]]</h2>
      <p>Email: [[currentUser.email]]</p>
    </div>
    <button on-tap="_handleLogout">Sign Out</button>
  </template>
  <script>
    Polymer({
      is: 'user-profile-card',
      // Add the behavior to inherit its properties and methods
      behaviors: [Polymer.UserSessionBehavior],
      _handleLogout() {
        // Call the logout method from the behavior
        this.logout();
      }
    });
  </script>
</dom-module>

优势：

• 自动支持Polymer的数据绑定：当用户状态变化时，所有使用该行为的组件会自动更新UI。
• 封装性更好：内部的用户会话逻辑是私有的，组件只能通过暴露的方法修改状态，避免混乱。

方法3：状态管理库（适合复杂大型项目） #

If your app has complex state interactions (like multiple parts of the app updating user data simultaneously), integrating a state management library like Redux with polymer-redux bindings is a great choice. This gives you a centralized store for all app state (including user info) and predictable state updates.

While this requires a bit more setup, it's ideal for larger apps where you need strict control over state changes and want to track state history.

总结 #

• For small to medium apps: Use the global window object or a Polymer Behavior. Both are simple and get the job done.
• For large, complex apps: Go with a state management library like Redux for better scalability and maintainability.

All these approaches achieve your goal of a singleton-like user info object that's accessible to any Polymer component without explicit passing.

内容的提问来源于stack exchange，提问作者Sudipta Roy