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

Answer 1

我找到了一个答案：

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

解决方案1：

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

export default defineNuxtConfig({
  ssr: false,
  
  // ... other options
})

小心：
这将全局禁用 SSR。

解决方案2：

将您的组件包装在 <client-only placeholder="Loading...">

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

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

Answer 2

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

首先安装插件yarn add pinia-plugin-persistedstate 或npm 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: {...}
})

Answer 3

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

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

我的测试代码：

//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>

Answer 4

您可以将 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: {
    }
});