vuex本地存储

最新推荐文章于 2024-02-07 14:16:31 发布

没有bug的小史

最新推荐文章于 2024-02-07 14:16:31 发布

阅读量612

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/djsknsns/article/details/127975213

版权

安装

npm install vuex-persistedstate --save

在store下的index.js中引入配置

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        createPersistedState(),  
    ],
})

默认存储到localStorage，如果想要存储到sessionStorage，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,    
        }),  
    ],
})

持久化所有的state，如果想要存储指定的state，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,      
            reducer(val) {        
                return {          
                    // 只存储state中的userData          
                    userData: val.userData        
                }      
            }    
        }),  
    ],
})