Vuex——数据持久化

以你之姓@ 2022-09-01 14:49 236阅读 0赞

## vuex-persistedstate ##

### 1.终端安装插件 ###

npm install vuex-persistedstate --save

### 2.store文件引入 ###

import Vue from 'vue'
    import Vuex from 'vuex'
    import app from './modules/app'
    import user from './modules/user'
    import tagsView from './modules/tagsView'
    import permission from './modules/permission'
    import settings from './modules/settings'
    import getters from './getters'
    import createPersistedState from 'vuex-persistedstate'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({ 
      modules: { 
        app,
        user,
        tagsView,
        permission,
        settings
      },
      getters,
      // 仓库存储数据持久化
      plugins: [createPersistedState({ 
        storage: window.sessionStorage,
          reducer (val) { 
            return { 
              // 只储存state中的单条信息
              user: { 
                avatar: val.user.avatar
              }
            }
          }
      })]
    })
    
    export default store

### 3. 不同格式 ###

#### 3.1 所有数据持久化 ####

plugins: [
        createPersistedState({ 
          storage: window.sessionStorage
        })
      ]

#### 3.2 单条数据持久化 ####

**1) （非对象组合）**  
// 如果想要持久化的数据不是对象中的属性，且存在，且改变该数据

avatar: ""

// 如果想要持久化的数据不是对象中的属性，在原有store中不存在，则在vuex中新增一条持久化数据

plugins: [createPersistedState({ 
        storage: window.sessionStorage,
          reducer (val) { 
            return { 
              // 只储存state中的单条信息
              avatar: val.user.avatar
            }
          }
      })]

**2) （对象组合）**  
// 原有store中已有对象user, 这样写会使原有数据持久化

user: { 
    	avatar: ''
    }

plugins: [createPersistedState({ 
        storage: window.sessionStorage,
          reducer (val) { 
            return { 
              // 只储存state中的单条信息
              user: { 
                avatar: val.user.avatar
              }
            }
          }
      })]

#### 4. 示例 （3.2 - 2） ####

原来这个属性一刷新就会置空，通过持久化保留该数据，刷新也不会被清空（我的示例属于3.2—2）对象组合）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]: /images/20220829/3ed2899a6bad4d938728568ed5c935e9.png