Nuxt3 + Pinia + VueUse -> useStorage()不工作
设置：，我正在使用Nuxt3 + Pinia + VueUse。
目标：，我想通过VueUse：useStorage将一个pinia商店的状态保存到本地存储。
问题:由于某种原因，没有在本地存储中创建任何项。我觉得我好像漏掉了什么。在组件中，我可以很好地使用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>谢谢。
回答 4
Stack Overflow用户
发布于 2022-05-11 21:48:57
我找到了一个答案：
默认情况下，Nuxt3使用SSR。但是，由于useStorage() (来自VueUse)使用浏览器本地存储，所以无法工作。
解决方案1:
禁用nuxt.config.js中的SSR
export default defineNuxtConfig({
ssr: false,
// ... other options
})谨慎：
这在全球范围内使SSR失效。
解决方案2:
将组件包装在中
<client-only placeholder="Loading...">
<MyComponent class="component-block"/>
</client-only>我很想听听其他处理这件事的方法。我觉得应该有更好的办法。
Stack Overflow用户
发布于 2022-05-26 20:43:07
我两周都在讨论这个话题。我决心使用插件皮尼娅-插件-帕西斯特德状态。我正在触摸插件/persistedstate.js并在Pinia defineStore()中添加persist: true
首先安装插件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: {...}
})Stack Overflow用户
发布于 2022-10-05 07:53:35
我找到了解决这个问题的办法，看来效果很好。我没有做过广泛的测试，但它似乎是有效的。
经过大量的挖掘，我在Pinia文档中看到了一个页面：处理可合成材料
备注：
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>在应用程序中重新加载和导航浏览器后，状态将完全保持。
https://stackoverflow.com/questions/72203619
复制相似问题
腾讯云开发者
