uniapp pinia状态持久化

在 Uniapp 中使用 Pinia 进行状态管理时，可以通过以下两种方式实现状态持久化：

1. 使用 Vuex 插件

Pinia 支持使用 Vuex 插件，通过在 Vuex 中使用 Vuex-persistedstate 插件来实现状态持久化。只需要在 main.js 中先导入 Vuex 和 Vuex-persistedstate 插件，然后在创建 Pinia 实例时传入 Vuex 的 store 即可。

示例代码：

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { createPinia } from 'pinia'

Vue.use(Vuex)

const store = new Vuex.Store({
  // Vuex store 配置
  plugins: [
    createPersistedState({
      // persistedstate 配置
    })
  ]
})

const pinia = createPinia()
pinia.use(store)

new Vue({
  pinia,
  render: h => h(App)
}).$mount('#app')

2. 使用 LocalStorage 或者 Cookies

Pinia 还支持使用 LocalStorage 或者 Cookies 来实现状态持久化。只需要在创建 Pinia 实例时传入自定义的插件即可。

示例代码：

// main.js
import { createPinia } from 'pinia'

const pinia = createPinia({
  plugins: [
    {
      // 自定义插件
      install(pinia) {
        // 从 LocalStorage 中获取状态
        const persistedState = localStorage.getItem('pinia-state')

        if (persistedState) {
          // 将状态还原到 Pinia 中
          pinia.state.value = JSON.parse(persistedState)
        }

        // 监听状态变化，将状态保存到 LocalStorage 中
        pinia.state.$subscribe(state => {
          localStorage.setItem('pinia-state', JSON.stringify(state))
        })
      }
    }
  ]
})

new Vue({
  pinia,
  render: h => h(App)
}).$mount('#app')

以上两种方式都可以实现状态持久化，选择哪一种方式取决于具体场景和需求。若需要更多定制化的功能，可以自行实现插件。