vue3 pinia redux-persist 的使用

Vue 3 的状态管理库 Pinia 和 Redux 的持久化库 redux-persist 的结合使用可以实现在 Vuex 中使用的持久化存储功能。

首先，安装依赖：

npm install pinia redux-persist

然后在 `src/store/index.ts` 中引入 Pinia 和 redux-persist：

import { createPinia } from 'pinia'
import { persist } from 'pinia-plugin-persist'
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const pinia = createPinia()

// 定义 Pinia 插件，使用 redux-persist 进行持久化存储
pinia.use(
  persist({
    // 持久化存储的 key
    key: 'pinia',
    // 持久化存储的引擎，默认使用 localStorage
    storage,
    // 将 Pinia 的状态转换为 Redux 的状态
    reducer: (state: any) => state.value,
    // 将 Redux 的状态转换为 Pinia 的状态
    restoreState: (reduxState: any) => ({ value: reduxState }),
  })
)

// 定义 Redux 的 reducer
const reducer = (state = 0, action: any) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 创建 Redux 的 store
const store = createStore(
  persistReducer({ key: 'redux', storage }, reducer),
  undefined,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

// 持久化存储 Redux 的 store
const persistor = persistStore(store)

export { pinia, store, persistor }

Pinia 插件中使用 redux-persist 的 `persistReducer` 方法将 Pinia 的状态转换为 Redux 的状态，并进行持久化存储；`restoreState` 方法则将 Redux 的状态转换为 Pinia 的状态。

在应用中使用 Pinia 时，可以直接使用 Pinia 的 API 进行状态管理，也可以通过 Redux 的 API 进行状态管理。例如，在 `src/App.vue` 中：

<template>
  <div>
    <div>Pinia: {{ $pinia.state.value }}</div>
    <div>Redux: {{ $store.getState() }}</div>
    <button @click="$pinia.state.value++">Pinia +</button>
    <button @click="$pinia.state.value--">Pinia -</button>
    <button @click="$store.dispatch({ type: 'INCREMENT' })">Redux +</button>
    <button @click="$store.dispatch({ type: 'DECREMENT' })">Redux -</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { usePinia } from 'pinia'
import { store, persistor } from './store'

// 注册 Pinia 的 store
const pinia = usePinia()
pinia.useStore(store)

// 注册 Redux 的 store
const vuexStore = useStore()
vuexStore.replaceState(persistor.getState())
store.subscribe(() => {
  vuexStore.replaceState(persistor.getState())
})
</script>

在应用中同时使用 Pinia 和 Redux 时，需要注意 Pinia 和 Redux 的状态同步。在上面的例子中，Pinia 和 Redux 的状态都被持久化存储，因此在应用中重新加载时，需要将 Redux 的状态从持久化存储中恢复，并将其转换为 Pinia 的状态。在 `script setup` 中，通过 `useStore` 获取 Vuex 的 store，并使用 `replaceState` 方法将 Redux 的状态设置为 Vuex 的状态；`store.subscribe` 方法监听 Redux 的状态变化，并在变化时将 Redux 的状态设置为 Vuex 的状态。这样，在应用中使用 Pinia 的 API 进行状态管理时，Pinia 和 Redux 的状态就是同步的。