san-store 深度指南

san-store 深度指南

san-storeApplication States Management for San项目地址:https://gitcode.com/gh_mirrors/sa/san-store

1. 项目介绍

san-store 是 San 框架的官方应用状态管理工具，它采用了类似 Flux 的单向数据流设计理念。该项目旨在帮助开发者在一个中心化的地方管理和维护应用的状态，以提高代码的可读性和可维护性。san-store 提供了简单的 API，可以轻松地将状态存储和组件连接起来，同时还支持多 Store 结构以及与 san-update 配合使用的状态变更器。

主要特点

• 单一状态源：所有应用状态都集中在一个或多个 Store 中。
• 响应式：状态的改变会自动触发视图更新。
• 易于理解和使用：API 简洁明了，易于上手。
• 灵活的连接机制：组件可以通过 connect 函数连接到 Store，选择需要订阅的状态和行为。

2. 项目快速启动

首先确保已安装 san 和 san-store：

npm install --save san san-store

然后，创建一个新的 San 项目并引入 san-store：

import san from 'san'
import {Store, connect} from 'san-store'

// 创建 Store 实例
const myStore = new Store({
  initData: {
    name: 'erik'
  },
  actions: {
    changeUserName({name}) {
      return this.set('user name', name)
    }
  }
})

// 定义组件
const MyComponent = san.defineComponent({
  template: `
    <div>
      [[name]]
      <input value="{{newName}}">
      <button on-click="change">change</button>
    </div>
  `,
  
  computed: {
    name() {
      return this.store.get('user name')
    }
  },
  
  methods: {
    change() {
      this.store.dispatch('changeUserName', this.data.get('newName'))
    }
  }
})

// 使用 connect 将 Store 与组件连接
const ConnectedComponent = connect({
  name: 'user name',
  change: 'changeUserName'
})(MyComponent)

// 初始化应用
new san.Application({
  el: '#app',
  component: ConnectedComponent
}).mount()

3. 应用案例和最佳实践

3.1 多 Store 模型

对于大型应用，可以使用多个 Store 来组织不同领域的状态：

// 导入必要的库
import {Store, connect} from 'san-store'

// 创建两个 Store 实例
const storeA = new Store(...)
const storeB = new Store(...)

// 定义组件并连接到多个 Store
const Component = connect(
  storeA, {name: 'user name'}, // 店铺A的数据和action映射
  storeB, {todos: 'todos'}     // 店铺B的数据和action映射
)(YourComponent)

3.2 Composition API

使用 san-composition 形式的组件，你可以这样使用 san-store：

import san from 'san'
import {defineComponent, template, method} from 'san-composition'
import {useState, useAction} from 'san-store/use'

// ...

const YourComponent = defineComponent([
  template(`
    ...
  `),
  
  method([
    async handleAction() {
      await useAction('yourAction', somePayload)
    }
  ]),
  
  // 订阅 Store 数据
  useState('yourDataPath'),
])

4. 典型生态项目

san-store 通常与其他 San 生态组件一起使用，例如：

• san-update：状态变更更新库，用于创建和执行状态更改操作。
• san-router：San 框架的路由管理解决方案。
• san-cli：San 项目的命令行工具，提供脚手架和构建功能。

这些生态项目的结合使用可以帮助开发者构建完整的前端应用程序。

---

了解更多关于 san-store 的信息，参考其 GitHub 文档，以及通过查看 示例项目 来进一步理解实际应用场景。祝你在使用过程中一切顺利！

san-storeApplication States Management for San项目地址:https://gitcode.com/gh_mirrors/sa/san-store