如何通过useLocalStorage在Pinia状态中正确加载本地存储数据

在Pinia选项式Store的state函数中使用@vueuse/core的useLocalStorage时，始终只能获取默认值，无法读取本地存储数据，且state内的console.log完全不执行。直接在state中访问localStorage也存在同样问题。

原代码示例：

import { useLocalStorage } from "@vueuse/core";
export const useTodoStore = defineStore("todos", {
  state: () => {
    console.log("inside state") // 无输出
    return {
      todos: useLocalStorage('todos', defautlDataMethod()),
    };
  },
  // 其他配置...
});

// 返回对象数组的默认数据方法
function defaultDataMethod() {
  return [/* 默认数据 */];
}

尝试在action中添加init方法初始化数据，但同样无法加载本地存储内容：

import { useLocalStorage } from "@vueuse/core";
export const useTodoStore = defineStore("todos", {
  state: () => {
    console.log("inside state") // 无输出
    return {
      todos: [],
    };
  },
  actions: {
    async init() { // 在Vue组件中调用此方法
      this.todos = useLocalStorage('todos', defautlDataMethod());
    },
  },
  // 其他配置...
});

function defaultDataMethod() {
  return [/* 默认数据 */];
}

问题原因 #

1. Pinia的state函数是同步纯函数，仅在Store初始化时执行一次，且执行时没有Vue响应式上下文，无法正常调用组合式API（如useLocalStorage）。
2. 直接在state中访问localStorage可能因Store初始化时机（如SSR环境无localStorage）或Pinia的state序列化逻辑导致读取失效。

解决方案 #

方案1：使用选项式Store的created钩子（推荐） #

Pinia选项式Store支持created钩子，此时Store已初始化完成，响应式上下文可用，可安全调用组合式API：

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

function defaultDataMethod() {
  return [/* 默认待办数据 */];
}

export const useTodoStore = defineStore("todos", {
  state: () => ({
    todos: [], // 先初始化空数组
  }),
  created() {
    // 绑定localStorage并初始化todos
    const storedTodos = useLocalStorage('todos', defaultDataMethod());
    // 若需双向绑定，可直接将state替换为响应式引用：this.todos = storedTodos
    this.todos = storedTodos.value;
  },
  // 其他actions、getters配置...
});

方案2：改用组合式Store写法（更灵活） #

组合式Store天生支持内部使用组合式API，写法更直观：

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

function defaultDataMethod() {
  return [/* 默认待办数据 */];
}

export const useTodoStore = defineStore("todos", () => {
  // 直接使用useLocalStorage，正常读取本地存储
  const todos = useLocalStorage('todos', defaultDataMethod());

  // 定义action示例
  const addTodo = (todo) => {
    todos.value.push(todo);
  };

  return { todos, addTodo };
});

方案3：手动操作localStorage（特殊场景使用） #

若无需VueUse的响应式绑定，可手动在created钩子中读写localStorage：

import { defineStore } from "pinia";

function defaultDataMethod() {
  return [/* 默认待办数据 */];
}

export const useTodoStore = defineStore("todos", {
  state: () => ({
    todos: [],
  }),
  created() {
    const stored = localStorage.getItem('todos');
    this.todos = stored ? JSON.parse(stored) : defaultDataMethod();
  },
  actions: {
    // 手动保存到localStorage
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    addTodo(todo) {
      this.todos.push(todo);
      this.saveTodos();
    },
  },
});

注意事项 #

• 确保已安装@vueuse/core：执行命令 npm i @vueuse/core
• 若为SSR环境（如Nuxt），VueUse的useLocalStorage已自动处理客户端判断，无需额外代码。

内容的提问来源于stack exchange，提问作者Mr. Kenneth