您的位置：首页 > 编程学习 > > 正文

vuex数据持续化（Vuex数据持久化实现的思路与代码）

更多时间：2022-04-01 01:11:57 类别：编程学习浏览量：1325

vuex数据持续化

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数据持久化实现的思路与代码）

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.stri.jpg" alt="vuex数据持续化（Vuex数据持久化实现的思路与代码）" border="0" />

调用方式：

import VuexPersist from "@/plugins/VuexPersist";

export default createStore({
  plugins: [VuexPersist()],
});

总结

到此这篇关于Vuex数据持久化实现的文章就介绍到这了,更多相关Vuex数据持久化内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：vuex 数据持久化

上一篇：sqlserver中的存盘按钮在哪（SQL Server 2016里的sys.dm_exec_input_buffer的问题）

下一篇：mysql binlog模式实际使用（实例验证MySQL|update字段为相同的值是否会记录binlog）

您可能感兴趣

vuex数据持续化（Vuex数据持久化实现的思路与代码）