VUE3 项目开发实战入门系列 （9.-数据持久化）

数据持久化

数据持久化指的是把数据保存到本地，常用的有localStorage或者sessionStorage，当然这里我们不是要介绍怎么使用原生的方法，而且通过store的插件要自动的把store数据保存到本地，vue生态里有很多这种类型的库，这里我要介绍的是vuex-persistedstate，它同时支持了vue2、vue3和nuxtjs。

章节内容

1. 安装依赖
2. 调用组件

安装依赖

npm install --save vuex-persistedstate

调用组件

编辑store文件src/store/index.js

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

import user from './modules/user'

const store = createStore({
    modules: {
        user
    },
    plugins: [createPersistedState()],
})

export default store;

添加完毕，就是这么简单，插件会自动把store的所有数据都保存到localStorage中，可以打开浏览器查看。

F12 | Application

注意插件默认是把所有的数据都保存到本地的，而且默认使用的是localStorage，如果只需要保存某个模块或者使用非localStorage的话可以查看官方的文档的使用介绍。

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v9.0 

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力