Vue 3,我决定不再使用 Vuex
2013 年 9 月 16 日
在开发基于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的方法
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并创建出了可是实时更新的数据中心.
持久化存储
import { watch, toRaw } from 'vue'
export function createPersistStorage(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(state),
action: readonly(action)
}
return store
}这样也就实现了对Store数据的持久化支持.
觉得有用 ？喜欢就收藏，顺便关注一下博主，点个赞吧，谢谢！
About The Author
