Laravel 8+Vue3+Pinia前端数据持久化配置问题求助

核心错误：Pinia插件挂载方式完全错误 #

你直接把pinia-plugin-persistedstate传给app.use()，但它是Pinia的专属插件，不是Vue全局插件，必须先创建Pinia实例，再通过pinia.use()挂载，这就是触发Cannot read properties of undefined (reading 'persist')错误的根本原因。

分步修复代码 #

1. 修正resources/js/app.js

单独创建Pinia实例并挂载插件，同时移除多余的Store映射代码：

import { createApp } from 'vue';
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 简化根组件，无需提前绑定Store
const app = {}

const myApp = createApp(app)
// 先创建Pinia实例
const pinia = createPinia()
// 给Pinia实例挂载持久化插件
pinia.use(piniaPluginPersistedstate)

myApp
    .use(pinia)
    .mount("#app")

2. 确认resources/js/stores/main.js配置

你的基础配置是正确的，可补全可选配置增强可控性：

import { defineStore } from 'pinia'

export const usemainStore = defineStore('main', {
    state: () => ({
        counter: 1,
    }),
    // 基础配置persist: true即可生效，以下为可选自定义配置
    persist: {
        key: 'main-store', // 自定义存储key，避免冲突
        storage: localStorage, // 存储介质，默认localStorage
        paths: ['counter'] // 指定仅持久化counter字段
    },
    getters: {},
    actions: {},
})

3. 修正basic.vue组件的Store引用方式

禁止使用$root.mainStore这种错误写法，推荐用Vue3 Composition API或规范的Options API方式：
Composition API写法（推荐）

<template>
    <div>
        Counter: {{ mainStore.counter }}
        <button @click="mainStore.counter++">+1（测试持久化）</button>
    </div>
</template>

<script>
import { usemainStore } from '../../stores/main'

export default {
    setup() {
        const mainStore = usemainStore()
        return { mainStore }
    }
}
</script>

Options API写法

<template>
    <div>
        Counter: {{ mainStore.counter }}
        <button @click="mainStore.counter++">+1（测试持久化）</button>
    </div>
</template>

<script>
import { mapStores } from 'pinia'
import { usemainStore } from '../../stores/main'

export default {
    computed: {
        ...mapStores(usemainStore)
    }
}
</script>

验证持久化效果 #

点击按钮修改counter值后刷新页面，打开Chrome开发者工具→Application标签→Local Storage，若能看到对应key（默认pinia:main或自定义的main-store）及存储的counter值，说明持久化生效。

内容的提问来源于stack exchange，提问作者E. Barney