前端数据库indexedDB能代替vuex吗

mini云码 发布日期： 2025-11-11 23:56

首先，indexedDB是代替localStore的，不是用来代替vuex等状态管理的。

因为vuex存在的目的在于协同页面多个组件的数据更新的，一旦有数据更新，多个组件只要引用了vuex属性的地方，都可以及时更新。

而indexedDB是用于持久存储的，比如一个数据更新了后，想要下载刷新页面或重新打开页面，前端的状态能保存起来，可以使用indexedDB来保存，因为localStore只有10M,一下就用完了，而indexedDB比localStore大的多，只要你浏览器所在的硬盘，磁盘空间足够即可。

indexedDB得使用也非常简单，很简单的一个语句，即可创建一个数据库连接，如下面的代码：

比如下面的代码，即可创建一个表，后面就可以操作这个表了：

const mydb = indexedDB.open('myDatabase', 2);
 
mydb.onupgradeneeded = function(event) {
  const db = event.target.result;
  console.log('数据库需要升级');
  // 创建一个对象存储空间
  
  db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
  console.log('对象存储表创建成功');
}
 
mydb.onsuccess = function(event) {
  const db = event.target.result;
  console.log('数据库打开成功');

}

写数据到表的方法：

const tx = db.transaction("users", "readwrite");
const store = tx.objectStore("users");
store.add({ id:123,name: "Alice" });
tx.oncomplete = function() {
  console.log("事务完成");
};

使用方法确实要比localStore要复杂一些，不过，你也可以自己封装一些方法，达到像使用localStore一样的效果。