vue.js 使用nuxt3持久化pinia存储

0lvr5msh 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(407)

我按照这里提供的指南pinia persisted state plugin，但我不能让它工作，我的状态重置页面刷新，我的配置有什么问题吗？

// nuxt.config
modules: [
  [
    "@pinia/nuxt",
    {
      autoImports: ["defineStore", "acceptHMRUpdate"],
    },
  ],
   @pinia-plugin-persistedstate/nuxt",
],

// test-store
export const useTestStore = defineStore("test-store", {
  state: () => ({
    hello: "there"
  }),
  persist: {
    storage: persistedState.localStorage,
  }
});

在一页我呼吁

const store = useTestStore();
store.$patch({ hello: "changed" });

并在另一个I控制台上记录状态

const store = useTestStore();
console.log(store.$state.hello);

当从一个导航到另一个时，不是记录“更改”，而是记录“那里”。

vue.js

来源：https://stackoverflow.com/questions/75874651/persisting-pinia-stores-using-nuxt-3

1条答案

按热度按时间

o75abkj41#

我也遇到了同样的问题，并决定在不使用任何插件的情况下快速简单地解决这个问题：

// app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
import { watch, onBeforeMount } from "vue";
import { usePersistentStore } from "~~/store/persistent";

const ps = usePersistentStore();

onBeforeMount(() => {
  ps.$state = JSON.parse(localStorage.getItem("persistent"));
});
watch(ps.$state, (value) => {
  localStorage.setItem("persistent", JSON.stringify(ps.$state));
});
</script>

赞(0）回复(0）举报 2023-05-18

我来回答

vue.js 使用nuxt3持久化pinia存储

1条答案

相关问题

热门标签

最新问答