Vue3, я решил больше не использовать Vuex

Vue.js

При разработке проектов на основе Vue3 мы обнаружили, что можем легко управлять данными, не полагаясь на Vuex.Composition ApiМожно быстро создавать простые для понимания глобальные хранилища данных.

Создать состояние

пройти черезreactiveДавайте создадим государство, выставленноеIStateиспользуется для облегчения принятия других документовStateобъект

import { reactive } from 'vue'

export interface IState {
    code: string
    token: string
    user: any
}

export const State: IState = {
    code: '',
    token: '',
    user: {}
}

export function createState() {
    return reactive(State)
}

Создать действие

давайте создадимActionприходите, как мы модифицируемStateМетоды

import { reactive } from 'vue'
import { IState } from './state'

function updateCode(state: IState) {
    return (code: string) => {
        state.code = code
    }
}

function updateToken(state: IState) {
    return (token: string) => {
        state.token = token
    }
}

function updateUser(state: IState) {
    return (user: any) => {
        state.user = user
    }
}

/**
 * 创建Action
 * @param state
 */
export function createAction(state: IState) {
    return {
        updateToken: updateToken(state),
        updateCode: updateCode(state),
        updateUser: updateUser(state)
    }
}

выставленнымIStateМы также можем реализовать кодовый доступ к State.

Создать магазин

созданныйStateиActionЗатем мы пропускаем их черезStoreинтегрированы вместе.

import { reactive, readonly } from 'vue'
import { createAction } from './action'
import { createState } from './state'

const state = createState()
const action = createAction(state)

export const useStore = () => {
    const store = {
        state: readonly(state),
        action: readonly(action)
    }

    return store
}

Таким образом, мы можем назватьuseStoreдоступ и модификацияState, потому что черезuseStoreвозвращениеStateчерезreadonlyсоздан, поэтому убедитесь, что толькоActionЕго можно изменить.

// 访问state
const store = useStore()
store.state.code

// 调用action
const store = useStore()
store.action.updateCode(123)

Это оставляет нас за пределами Vuex и создает обновляемый в реальном времени центр обработки данных.

постоянное хранение

Для многих данных в Магазине по-прежнему необходимо реализовать постоянное хранилище, чтобы гарантировать, что данные по-прежнему доступны после обновления страницы.watchдля достижения постоянного хранения

import { watch, toRaw } from 'vue'

export function createPersistStorage<T>(state: any, key = 'default'): T {
    const STORAGE_KEY = '--APP-STORAGE--'

    // init value
    Object.entries(getItem(key)).forEach(([key, value]) => {
        state[key] = value
    })
	
    function setItem(state: any) {
        const stateRow = getItem()
        stateRow[key] = state
        const stateStr = JSON.stringify(stateRow)
        localStorage.setItem(STORAGE_KEY, stateStr)
    }

    function getItem(key?: string) {
        const stateStr = localStorage.getItem(STORAGE_KEY) || '{}'
        const stateRow = JSON.parse(stateStr) || {}
        return key ? stateRow[key] || {} : stateRow
    }

    watch(state, () => {
        const stateRow = toRaw(state)
        setItem(stateRow)
    })

    return readonly(state)
}

пройти черезwatchиtoRawмы сделали этоstateиlocalstorageвзаимодействие.

просто нужноreadonlyзаменитьcreatePersistStorageПросто

export const useStore = () => {
    const store = {
        state: createPersistStorage<IState>(state),
        action: readonly(action)
    }

    return store
}

Это также реализует поддержку постоянства для данных Store.

Категории