Vue3,我决定不再使用Vuex

在开发基于Vue3的项目中发现我们可以不再依赖Vuex也能很方便的来管理数据,只需要通过Composition Api可以快捷的建立简单易懂的全局数据存储.

创建State

通过reactive我们来创建state,暴露的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

我们来创建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的代码访问.

创建Store

创建好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并创建出了可是实时更新的数据中心.

持久化存储

很多Store中的数据还是需要实现持久化存储,来保证页面刷新后数据依然可用,我们主要基于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数据的持久化支持.