Pinia 核心功能实现

这是一个简化版的 Pinia 实现，展示了状态管理的核心功能。

项目结构

04-core-feature/
├── src/
│   ├── store.js           # Store
│   ├── state.js           # 状态管理
│   └── actions.js         # 动作
├── test/
│   └── store.test.js
├── package.json
└── README.md

核心功能

1. Store

定义状态容器。

功能:

• 状态定义
• Getter 计算
• Action 执行

2. 状态管理

管理应用状态。

功能:

• 状态响应式
• 状态更新
• 状态订阅

3. 动作

执行异步操作。

功能:

• 异步处理
• 错误处理
• 状态修改

使用方法

安装依赖

npm install

运行测试

npm test

实现细节

Store 定义

使用 Proxy 实现响应式：

export function createStore(options) {
  const store = {
    state: reactive(options.state || {}),
    getters: options.getters || {},
    actions: options.actions || {}
  }
  
  return store
}

状态更新

使用 Proxy 拦截状态修改：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      notify(key, value)
      return true
    }
  })
}

动作执行

绑定上下文并执行：

function bindActions(store, actions) {
  const boundActions = {}
  
  for (const key in actions) {
    boundActions[key] = actions[key].bind(store)
  }
  
  return boundActions
}

应用场景

• 状态管理 - 全局状态管理
• 数据共享 - 组件间数据共享
• 异步操作 - API 请求处理
• 持久化 - 状态持久化

总结

这个实现展示了 Pinia 的核心概念和架构，包括：

1. Store - 状态容器定义
2. 状态管理 - 响应式状态
3. 动作 - 异步操作处理

通过这个实现，可以深入理解状态管理的原理和设计理念。