Vue - vuex 中 store 中的数据持久化存储，解决刷新页面时 store 中的存储的数据不丢失

向右看齐 2021-09-01 06:18 961阅读 0赞

### vuex 中的数据持久化存储 ###

*  一. 无需插件实现
 *  二. 使用 vuex-persist 插件实现

> Vuex 的使用：[https://blog.csdn.net/Jie\_1997/article/details/107228246][https_blog.csdn.net_Jie_1997_article_details_107228246]  
> Vuex 中 store 保存的数据，当刷新页面时数据会清空，如何解决刷新页面时 store 中存储的数据不丢失？

# 一. 无需插件实现 #

1.  更改 `store.js` 文件 `state` 的定义：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]
    
        state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
          userData: {}
        },
2.  在 `App.vue` 中添加：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]
    
        mounted() {
          window.addEventListener('unload', this.saveState)
        },
        methods: {
          saveState() {
            sessionStorage.setItem('state', JSON.stringify(this.$store.state))
          },
        },

# 二. 使用 vuex-persist 插件实现 #

1.  安装 vuex-persist  
    `npm install vuex-persist --save`
2.  引入vuex-persist
    
        import VuexPersist from 'vuex-persist'
3.  创建对象，借助浏览器缓存，存入localStorage
    
        const vuexLocal = new VuexPersist({ 
            storage: window.localStorage  // 可选存储方式
        })
4.  vuex.Store 中引入该插件
    
        plugins: [vuexLocal.plugin]

**一个实例：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    // 引入vuex-persist
    import VuexPersist from 'vuex-persist';
    // 创建对象，借助浏览器缓存，存入localStorage
    const vuexLocal = new VuexPersist({ 
        storage: window.localStorage  // 可选存储方式
    })
    
    export default new Vuex.Store({ 
        state: { 
            id: 1
        },
        mutations: { 
            editId(state, id) { 
                state.id = id
            }
        },
        // 引入 vuex-persist 插件
        plugins: [vuexLocal.plugin]
    })

[https_blog.csdn.net_Jie_1997_article_details_107228246]: https://blog.csdn.net/Jie_1997/article/details/107228246
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/b0ad8936d082423899e5a5dae94ac66b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/fa9a926ace90424a8f87f10b276f54c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20210725/a5a31bb7f6ea4aa3b08b842529166db5.png