React Zustand存储token报错解决方案

问题

在 React 的请求封装中使用store中的内容时报错如下

分析

我的写法如下：

1. store中存储token

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'// 主状态store
const useStore = create()(devtools(persist((set, get) => ({// 状态count: 0,user: null,loading: false,beidouToken: null,setBeidouToken: token => set({ beidouToken: token }, false, 'setBeidouToken'),}),{name: 'app-storage', // 本地存储的keypartialize: state => ({count: state.count,user: state.user,}), // 只持久化这些字段}),{name: 'app-store', // devtools中显示的名称})
)export { useStore }

2. 存储token：在server.js文件中进行存储

import { useStore } from '@/stores/useStore'
const { setBeidouToken } = useStore()
setBeidouToken(res.data)

2. 获取token：在一般的jsx文件中

import { useStore } from '@/stores/useStore'const { beidouToken } = useStore()

然后就报错如下了：

解决

1. useStore是一个Zustand store

const onFinish = async () => {const { useStore } = await import('@/stores/useStore');const store = useStore.getState();if (store && store.setBeidouToken) {store.setBeidouToken('111111');}setTimeout(() => {const { beidouToken } = useStore.getState()console.log('token', beidouToken);}, 2000);
}