uni-app vue3 使用pinia 在支付宝小程序中报错 Cannot read properties of undefined (reading 'getItem')

uni-app vue3 使用pinia 在支付宝小程序中报错 Cannot read properties of undefined (reading ‘getItem’)

测试过的手机：

华为p40pro+

示例代码：

store/info.js

import { defineStore } from "pinia"  
import { ref } from "vue"  
export const useStore = defineStore('store', () => {  
    //token  
    const token = ref('')  
    const setToken = (newToken) => {  
        token.value = newToken  
    }  
    const removeToken = () => {  
        token.value = ''  
    }  
return {  
        token, //登录token  
        setToken,  
        removeToken  
}  
}, {  
    persist: true //持久化存储(为了刷新页面，存储值不消失)  
})

main.js

import { createSSRApp } from 'vue'  
import { createPinia } from 'pinia'  
import { createPersistedState } from 'pinia-persistedstate-plugin'  

import App from './App.vue'  
export function createApp() {  
    const app = createSSRApp(App)  
    const pinia = createPinia()  
    const persist = createPersistedState()  
    pinia.use(persist)  
    app.use(pinia)  
    return {  
        app  
    }  
}

操作步骤：

onMounted(() => {
userInfo.value = store.userInfo ? store.userInfo : '';
})

预期结果：

预期正常使用

实际结果：

vendor.js:3660 TypeError: Cannot read properties of undefined (reading 'getItem')
at getState (VM1792 index.worker.js:17705:26)
at VM1792 index.worker.js:17717:16
at VM1792 index.worker.js:17620:16
at EffectScope.run (VM1792 index.worker.js:11339:16)
at VM1792 index.worker.js:17619:27
at Array.forEach (<anonymous>)
at createSetupStore (VM1792 index.worker.js:17604:12)
at Object.useStore (VM1792 index.worker.js:17662:9)
at setup (VM1792 index.worker.js:39021:28)
at callWithErrorHandling (VM1792 index.worker.js:12668:21)

bug描述：

uni-app vue3 使用pinia 在支付宝小程序中报错：“Cannot read properties of undefined (reading ‘getItem’)"


更多关于uni-app vue3 使用pinia 在支付宝小程序中报错 Cannot read properties of undefined (reading 'getItem')的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请提供下测试工程

更多关于uni-app vue3 使用pinia 在支付宝小程序中报错 Cannot read properties of undefined (reading 'getItem')的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 Pinia 在支付宝小程序中遇到 Cannot read properties of undefined (reading 'getItem') 错误，通常是因为 Pinia 默认依赖浏览器的 localStorage，而支付宝小程序环境中并不存在 localStorage。

解决方案

  1. 自定义存储适配器

    你可以通过自定义存储适配器来解决这个问题。Pinia 允许你提供一个自定义的 storage 实现，可以适配支付宝小程序的环境。

    首先，安装 [@pinia-plugin-persistedstate](/user/pinia-plugin-persistedstate) 插件，它可以帮助你管理持久化状态：

    npm install [@pinia-plugin-persistedstate](/user/pinia-plugin-persistedstate)

    然后在 main.js 或 main.ts 中配置 Pinia 并自定义存储适配器：

    import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from '[@pinia-plugin-persistedstate](/user/pinia-plugin-persistedstate)'
import App from './App.vue'

const pinia = createPinia()

// 自定义存储适配器
const storage = {
  getItem(key) {
    return uni.getStorageSync(key)
  },
  setItem(key, value) {
    uni.setStorageSync(key, value)
  },
}

pinia.use(piniaPluginPersistedstate({
  storage,
}))

const app = createApp(App)
app.use(pinia)
app.mount('#app')

  2. 检查支付宝小程序的兼容性

    确保你的代码中没有直接使用 localStorage，而是使用 uni-app 提供的 uni.setStorageSync 和 uni.getStorageSync 方法。

  3. 调试和排查问题

    如果问题仍然存在，可以尝试在代码中打印调试信息，确认 uni.getStorageSync 和 uni.setStorageSync 是否正常工作。

    console.log('Storage value:', uni.getStorageSync('your_key'))

  4. 使用 [@vueuse](/user/vueuse)/storage 作为替代

    你也可以考虑使用 [@vueuse](/user/vueuse)/storage 作为 localStorage 的替代方案，它提供了跨平台的存储解决方案。

    npm install [@vueuse](/user/vueuse)/storage

    然后在代码中使用：

    import { useStorage } from '[@vueuse](/user/vueuse)/storage'

const store = useStorage('your_key', 'default_value')
回到顶部