为了挽救页面刷新后数据丢失的问题，我们通常将数据存储在localstorage或sessionstorage中。在vue框架越来越流行的时候，vuex经常被我们用来统一管理数据。Vuex优势：与sessionStorage相比，存储数据更安全，在控制台可以看到sessionStorage。vuex的缺点：F5刷新页面后，vuex会重新更新state，存储的数据会丢失。Vuex的状态存储是无法持久化的。为了解决这个问题，vuex-persiste应运而生。vuex-persist安装npminstall--savevuex-persist在全局store中使用，importimportVuexPersistencefrom'vuex-persist'stateconststate={query:{}}中声明的一个值在Store中添加vuex-persist调用exportdefaultnewVuex.Store({state,getters,actions,mutations,plugins:[newVuexPersistence({reducer:state=>({query:state.query//这是存储在localStorage中的值})}).plugin]})vuex-persistedstate随vuex-persist安装npminstallvuex-persistedstate--save在store下的index.js中使用importcreatePersistedStatefrom"vuex-persistedstate"conststore=newVuex.Store({//...plugins:[createPersistedState()]})选择数据存储的位置，可以是localStorage/sessionStorage/cookieimportcreatePersistedStatefrom"vuex-persistedstate"conststore=newVuex.Store({//...plugins:[createPersistedState({storage:window.sessionStorage})]})vuex-persistedstate默认持久化所有状态，指定状态需要持久化importcreatePersistedStatefrom"vuex-persistedstate"conststore=newVuex.Store({//...plugins:[createPersistedState({storage:window.sessionStorage,reducer(state){return{//只存储state中的useruser:state.user}}})]
