Nuxt3 + Pinia + VueUse -> useStorage() 不工作

设置: 我正在使用 Nuxt3 + Pinia + VueUse。

目标: 我想通过 VueUse 将 pinia 商店的状态保存到本地存储: useStorage

问题:由于某种原因,本地存储中没有创建任何项目。我觉得我在这里遗漏了一些东西。在组件中,我可以很好地使用 useStorage

stores/piniaStoreVueUse.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

components/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse';

    const piniaStoreVueUse = usePiniaStoreVueUse();
</script>

<template>
    <div>
        piniaStoreVueUse.state: {{ piniaStoreVueUse.state }}<br>
        <button class="button" @click="piniaStoreVueUse.enrollState()">
            enrollState
        </button>
        <button class="button" @click="piniaStoreVueUse.emptyState()">
            clearState
        </button>
    </div>
</template>

<style scoped>
</style>

Live Version here

谢谢你。

stack overflow Nuxt3 + Pinia + VueUse -> useStorage() not working
原文答案

答案:

作者头像

我找到了一个答案:

Nuxt3 默认使用 SSR。但是由于 useStorage()(来自 VueUse)使用浏览器的 localstorage,所以这是行不通的。

解决方案 1:

在您的 nuxt.config.js 中禁用 SSR

export default defineNuxtConfig({
  ssr: false,

  // ... other options
})

小心:
这将全局禁用 SSR。

解决方案 2:

将您的组件包装在

 <client-only placeholder="Loading...">
    <MyComponent class="component-block"/>
 </client-only>

我很想听听其他方法来处理这个问题。我觉得应该有更好的方法。

作者头像

我关注了这个话题两周。我解决了使用插件 pinia-plugin-persistedstate. 我触摸 plugin/persistedstate.js 并在 Pinia persist: true 中添加 defineStore()

首先安装插件 yarn add pinia-plugin-persistedstatenpm i pinia-plugin-persistedstate

#plugin/persistedstate.js
import { createNuxtPersistedState } from 'pinia-plugin-persistedstate'

export default defineNuxtPlugin(nuxtApp => {
 nuxtApp.$pinia.use(createNuxtPersistedState(useCookie))
})

#story.js
export const useMainStore = defineStore('mainStore', {
state: () => {
    return {
        todos: useStorage('todos', []),
        ...
    }
},
persist: true, #add this
getters: {...},
actions: {...}
})
作者头像

您可以将 ref 与 useStorage() 一起使用

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: ref(useStorage('my-state', 'empty')),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});
作者头像

我找到了解决这个问题的方法,它似乎工作得很好。我没有进行广泛的测试,但它似乎有效。

经过大量挖掘后,我在 Pinia 文档中看到了一个页面: Dealing with Composables

笔记:

npm i -D @vueuse/nuxt @vueuse/core

我的测试代码:

//storageTestStore.js

import { defineStore, skipHydrate } from "pinia";
import { useLocalStorage } from '@vueuse/core'

export const useStorageTestStore = defineStore('storageTest', {
    state: () => ({
      user: useLocalStorage('pinia/auth/login', 'bob'),
    }),
    actions: {
        setUser(user) {
            this.user = user
        }
    },

    hydrate(state, initialState) {
      // in this case we can completely ignore the initial state since we
      // want to read the value from the browser
      state.user = useLocalStorage('pinia/auth/login', 'bob')
    },
  })

test.vue (~~/pages/test.vue)

<script setup>
    import { ref, onMounted } from "vue";
    import { useStorageTestStore } from "~~/stores/storageTestStore";

    const storageTestStore = useStorageTestStore();

    // create array with 10 random first names
    const firstNames = [
        "James",
        "John",
        "Robert",
        "Michael",
        "William",
        "David",
        "Richard",
        "Charles",
        "Joseph",
        "Thomas",
    ];

    const updateUser = () => {
        storageTestStore.setUser(
            firstNames[Math.floor(Math.random() * firstNames.length)]
        );
    };
</script>

<template>
    <div class="max-w-[1152px] mx-auto">
        <h1 class="text-xl">{{ storageTestStore.user }}</h1>
        <button
            class="text-lg bg-emerald-300 text-emerald-900 p-5 rounded-lg"
            @click="updateUser()"
        >
            Change User
        </button>
    </div>
</template>

<style scoped></style>

在浏览器重新加载并在应用程序中导航后,该状态完全保持不变。