使用 nuxt 3 持久存储 pinia

Question

我按照此处提供的指南pinia 持久状态插件 但我无法让它工作，我的状态在页面刷新时重置，我的配置有问题吗？

// 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" });

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

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

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

Answer 1

你的

modules

配置似乎不对它应该是一个阵列。

// nuxt.config.js
export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
  pinia: {
    autoImports: [
      'defineStore', 'acceptHMRUpdate'
    ],
  },
})

https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt-3.html#installation

https://pinia.vuejs.org/ssr/nuxt.html#auto-imports