标签：状态 插件 持久 localStorage user Vuex store

数据持久化

由于Vuex的状态是存储在应用中，当刷新时所有状态都还原了。因此一些场景下需要做状态的抱持，如：登录状态等
实现持久化的方式一般有：localStorage、sessionStorage、cookie、后端存储

使用Vuex插件的形式去监听同步状态

// pluginsPersist.js
export default store => {
    // store初始化的时候，将存储在localStorage中的状态还原
    if (localStorage) {
        const user = JSON.parse(localStorage.getItem('user'))
        if (user) {
        	// 如果数据存在，则修改vux中的状态
            store.commit('login', user.username)
        }
    }
    
    // 如果用户相关状态发生变化，自动存入localStorage
    store.subscribe((mutation, state) => {
        const { type } = mutation;
        if(type === 'login') {
            const user = JSON.stringify(state.user)
            localStorage.setIntem('user', user)
        } else if (type === 'logout') {
            localStorage.removeItem('user')
        }
    })
}

在 Vuex 文件中注册插件

// store/index.js
import persist from './store/pluginsPersist.js'

export default new Vuex.Stroe({
    modules: { user }, // 模块化
    strict: true, // 严格模式
    plugins: [persist]  // 可以注册多个
})

标签：状态,插件,持久,localStorage,user,Vuex,store
来源： https://www.cnblogs.com/yuxi2018/p/14639898.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。