Vuex的插件保持状态持久化

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

数据持久化

由于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]  // 可以注册多个
})