当前位置:编程学习 > > 正文

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

时间:2022-04-01 01:11:57类别:编程学习

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 中的数据。

    实现思路

    代码

    插件:

  • 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数据持久化内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐