小编给大家分享一下Vuex数据持久化怎么实现，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
什么是vuex
vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态
五个属性： state、getters、mutations、actions、module
基本使用:
新建store.js文件，最后在main.js中引入，并挂载到实列上
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {} const actions = {} export default new Vuex.Store({ state, getters, mutations, actions })state属性： 存放状态，例如你要存放的数据
getters： 类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据
mutations： 唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()
actions: 一步的mutations，可以通过dispatch来分发从而改变state
Vuex 数据持久化
众所周知，Vuex 的数据是存储在内存中的，刷新一下网页这些数据就会丢失。而有些数据我们希望刷新后仍然能够留存，这就需要把数据存储下来。这里就记录一下，使用 localStorage 来持久化 Vuex 中的数据。
实现思路
因为 state 中的数据理论上只能通过 mutation 来进行更新，所以可以监听 mutation 事件，在每次事件执行后，将此时整个 state 的数据转为字符串后存储进 localStorage。
在页面初始化 state 时，读取 localStorage 值，重新转为 JSON 后，合并进当前 state。
这种方法只是一个简单的实现，只适用于简单对象，对复杂对象来说，重新转为 JSON 可能会失去对应的事件和方法，后面可以考虑以其他方式存储。
代码
插件：
export default (options = {}) => { const storage = options.storage || (window && window.localStorage); const key = options.key || "vuex"; // 获取state的值 const getState = (key, storage) => { const value = storage.getItem(key); try { return typeof value !== "undefined" ? JSON.parse(value) : undefined; } catch (err) { console.warn(err); } return undefined; }; // 设置state的值 const setState = (key, state, storage) => storage.setItem(key, JSON.stringify(state)); return (store) => { // 初始化时获取数据，如果有的话，把原来的vuex的state替换掉 const data = Object.assign(store.state, getState(key, storage)); if (data) { store.replaceState(data); } // 订阅 store 的 mutation。handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数 store.subscribe((mutation, state) => { setState(key, state, storage); }); };};调用方式：
import VuexPersist from "@/plugins/VuexPersist";export default createStore({ plugins: [VuexPersist()],});以上是“Vuex数据持久化怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
