vue、react和小程序的状态管理

vue2的状态管理

vuex

vue3的状态管理

pinia

pinia官网：Pinia | The intuitive store for Vue.js

pinia安装: npm i pinia

pinia使用：

// 第一步：pinia引入
import {creatPinia} from 'pinia'

// 第二步：创建pinia
const pinia = creatPinia()

// 第三步：安装pinia
const app = cratApp()
app.use(pinia)

pinia存储和读取数据

pinia存储数据

import {defineStore} from 'pinia'

// defineStore接收两个参数，第一个参数是文件名字，第二个参数是store的配置项
// 配置项目可以是选项式也可以是组合式

// 选项式
// 选项式第二个参数是对象
export const useDemoStore = defineStore('demo', {
    // 配置状态
    // state是一个函数
    // 返回一个对象
    state() {
        return {
            demo: 1
        }
    },

    // 在这里可以获取this,this上有状态值
    action: {
        changeDemo() {
            this.demo = 3
        }
    }
})

// 组合式
// 组合式第二个参数是函数
import {ref} from 'vue'
export const useDemoStore = defineStore('demo', () => {
    // 配置状态
    // 使用选项式API进行定义
    const demo = ref(0)

    // action中的函数正常写即可
    changeDemo() {
       demo = 3
    }
    
    // 如果要把这些状态和方法暴漏出去，需要有返回值
    return {
        demo,
        changeDemo
    }
})

pinia读取数据

// 首先把之前定义的demo引入
import {useDemoStore} from './demo'

// 之前定义的store有返回值，返回值中就有我们定义的方法和状态
const demoStore = useDemoStore()

// 获取状态
// 第一种方法
demoStore.demo

// 第二种
demoStore.$state.demo

pinia修改状态

// 首先把之前定义的demo引入
import {useDemoStore} from './demo'

// 之前定义的store有返回值，返回值中就有我们定义的方法和状态
const demoStore = useDemoStore()

// 第一种：直接修改
demoStore.demo = 2

// 第二种: 可以批量修改
demoStore.$patch({
    demo: 1,
    demo2: 2
})

// 第三种：使用action进行修改
// 使用action进行修改的目的是如果是复杂的逻辑，可以进行服用
demoStore.changeDemo({
    demo: 1,
    demo2: 2
})

storeToRefs

为什么要有这个API？

把全局状态引入之后，在使用的时候每次都要多取一层，这个的目的是把状态结构出来，并且是响应式的

import {storeToRefs} from 'pinia'

const demoStore = useDemoStore()

const {demo} = storeToRefs(demoStore)

getters

和vuex中的getter一样，都是计算状态值的

$subscribe

这个API的作用是来监听某个store中的值是否有变化，若是监听到变化可以做一些逻辑操作，类似于watch监听

const demoStore = useDemoStore()

const {demo} = storeToRefs(demoStore)

// 接收一个函数作为参数
// 函数接收两个参数，参数一是本次修改信息，参数二是state
demoStore.$subscribe((mutate, state) => {})

react的状态管理

redux

react-redux

mobx

mobx中文文档：https://cn.mobx.js.org

mobx安装：npm i mobx mobx-react

mobx存储和读取数据

observale/observer: 会使用到这俩装饰器，第一个是把普通状态定义为可以被mobx中的钩子函数监测的状态，第二个是把mobx和react组件进行关联

mobx存储数据

import {observable, action} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
}


// 通过props向下传递store中的数据
ReactDOM.render(<App store={new user()} />, document.getElementById('#root'))

使用mobx中的数据

import {observable, action} from 'mobx'
import {observer} from 'mobx-react'


// 组件中使用store
// 从props中结构出store

@observer
class com extends React.component {
    render() {
        {store} = this.props
    }
}

mobx修改状态

computed

计算属性，类似于vue中的computed

import {observable, computed} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
    @computed get changeDemoName() {
        return this.demoName += '==='
    }
    
}

action

对状态的操作

import {observable, action} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
    @action changeDemoName() {
       this.demoName += '==='
    }

    // action加一个限定词bound,目的是正确绑定实例this
    @acton.bound bchangeName() {
        this.demoName += '===bound改变'
    }

    // 异步action
    // action里面有异步操作，可以有以下三种方法
    @action syncChangName() {
        // 第一种
        再写另外一个action去改变异步里面的值
        // 第二种
        // 第二个参数函数需要手动立即调用
        使用action('方法名称'， 函数)
        // 第三种
        runInAction(() => {
            // 直接在这里改变状态值
        })
    }
    
}

mobx的动态检测

autorun

接收一个函数作为参数，默认会执行一次，当内部依赖的被观测值发生改变时会再执行一次

import {observable, computed, autorun} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
    @computed get changeDemoName() {
        return this.demoName += '==='
    }
    
}

autorun(() => {
    this.demoName += 'autorun监测改变'
})

when

当满足条件时，只执行一次

接收两个函数作为参数，参数一是判断被监测的值是否满足条件，满足条件执行第二个函数

import {observable, computed, when} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
    @computed get changeDemoName() {
        return this.demoName += '==='
    }
    
}

when(() => {
    return a > 10
}, () => {
    // 满足条件时执行代码
})

reaction

初始化不会执行，也可手动停止监测，只有被监测的数据发生改变才会触发

接收两个函数作为参数，第一个参数的返回值会作为第二个函数参数的第一个参数，

第二个参数是一个函数，接收两个参数，第一个参数就是reaction第一个参数的返回值，第二个参数是reaction本身

import {observable, computed, reaction} from 'mobx'

class user {
    // 熟悉类的装饰器，会更好理解当前的状态和函数的定义
    @observable demoName = '小刘'
    
    @computed get changeDemoName() {
        return this.demoName += '==='
    }
    
}

reaction(() => {
    return 10
}, (data, reaction) => {
    // data是上个参数的返回值10
    // 第二个参数是reaction本身
    // 可以调用reaction.dispose()来停止继续监测的数据
    // 满足条件时执行代码
})

小程序的状态管理

mini-program