duxapp放弃了redux,在duxapp状态实现方案

全局状态

全局状态是一个很实用的功能,例如管理用户信息,组件间状态共享等功能都需要用到全局状态,react有很多成熟的全局状态管理工具,但是很多写起来太过麻烦,duxapp提供了几种应对不同场景的全局状态的方案,当然如果你需要其他全局状态,可以自行集成

局部全局状态

这种全局状态方案的使用场景,在于父子组件之间的状态共享

bash 复制代码
import { contextState } from '@/duxapp'
import { Text } from '@/duxui' 
const A = () => {
  return <contextState.Provider defaultValue='张三'>
    <B />
    <C />
  </contextState.Provider>
}
 
const B = () => {
  const [name] = contextState.useState()
 
  return <Text>{name}</Text>
}
 
const C = () => {
  const [, setName] = contextState.useState()
  return <Text onClick={() => setName('李四')}>设置名称为李四</Text>
}

也可以在A组件中控制这个值的变化

bash 复制代码
import { contextState } from '@/duxapp'
import { Text } from '@/duxui'
import { useState } from 'react'
 
const A = () => {
 
  const [name, setName] = useState()
 
  return <contextState.Provider value={name}>
    <B />
    <C />
    <Text onClick={() => setName('王五')}>设置名称为王五</Text>
  </contextState.Provider>
}
 
const B = () => {
  const [name] = contextState.useState()
 
  return <Text>{name}</Text>
}
 
const C = () => {
  const [, setName] = contextState.useState()
 
  return <Text onClick={() => setName('李四')}>设置名称为李四</Text>
}

这里只演示了一层组件的嵌套,多层组件的嵌套也是支持的

全局状态

这个状态可以在整个运行时内所有页面或者组件内调用

bash 复制代码
import { createGlobalState } from '@/duxapp'
 
/** 需要在合适的地方创建,然后导出,在此处仅演示如何使用 */
const globalState = createGlobalState({ text: '默认值' })
 
// 任何地方设置值
globalState.setState({ text: '设置的值' })
 
// 在组件或者hook中取值
const data = globalState.useState()

这个方法使用比较单间,如果你需要更复杂的功能,例如用户信息管理,可以使用下面的全局状态管理

全局状态管理

全局状态管理是用 ObjectManage 这个类来实现的,你需要继续扩展编写这个类来实现功能,下面以用户信息管理来演示如何使用这个类

定义一个用户管理类继承到ObjectManage

通过data,编写默认数据

通过构造函数设置 ObjectManage 的参数,参数的意思是使用缓存,缓存数据,当你更新数据时,数据会被自动设置到本地缓存中,下次启动将自动读取缓存

bash 复制代码
import { ObjectManage } from '@/duxapp'
 
class UserManage extends ObjectManage {
  
  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }
 
  data = {
    // 登录状态
    status: false,
    // ...其他模块的用户信息
  }
}
 
/**
 * 实例化这个用户管理对象并且导出
 */
export const user = new UserManage()

这样就获得了一个基本的全局状态,要使用这些全局状态,可以在组件、hook、或者其他任何位置

bash 复制代码
// 直接调用当前数据
user.data.status
 
// 使用hook调用数据
const data = user.useData()
data.status

对于用户信息管理,他还需要一些其他的操作,都可以在用户管理类里面进行扩展,例如判断是否登录,去登录、退出登录、更新用户信息、获取线上用户信息等

bash 复制代码
import { ObjectManage } from '@/duxapp'
 
class UserManage extends ObjectManage {
  
  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }
 
  data = {
    // 登录状态
    status: false,
    // ...其他模块的用户信息
  }
 
  isLogin = () => !!this.data.status
 
  login = () => {
    // 登录逻辑
  }
 
  logout = () => {
    // 退出登录逻辑
  }
 
  getOnlineUserInfo = () => {
    // 请求用户信息接口更新用户信息
    request('').then(res => this.set(res))
  }
 
  setUsreInfo = data => {
    this.set(old => ({ ...old, ...data }))
    // 请求接口更新用户信息
    request({
      url: '',
      method: 'POST',
      data
    })
  }
}
 
/**
 * 实例化这个用户管理对象并且导出
 */
export const user = new UserManage()

这里仅是举例,用户模块里面的用户管理功能远比此例子复杂,可以前往查看

开发文档:http://duxapp.cn

GitHub:https://github.com/duxapp

相关推荐
还是大剑师兰特29 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解29 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~36 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding40 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css