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