vuex如何实现数据持久化,vuex特性
本文主要介绍vue和nuxt.js中vuex状态持久化的区别，有很好的参考价值。希望你能帮忙。如有错误或不足之处，请不吝赐教。
目录
vue和nuxt中vuex状态持久化的区别. js vue使用Nuxtvue的Vuex的数据持久化，使用插件vuex-persistedstate持久化数据。插件是一个一维数组，否则它将解析错误。
vuex状态持久化在vue和nuxt.js的区别
Vue
相信很多人都熟悉Vue中vuex状态的坚持。只需使用vuex-persisted状态或Vuex-persisted。
这里推荐前者，因为vuex-persist是基于ts的，不配置webpack打包ts有问题，ie有问题。
使用
从“vuex-persistedstate”导入persistedState
导出默认的新Vuex。商店({
//.
插件：[persistedState()]
})
要更改会话存储模式：
从“vuex-persistedstate”导入persistedState
导出默认的新Vuex。商店({
//.
插件：[
persisted state({ storage:window . session storage })
]
})
使用cookie存储：
从“vuex-persistedstate”导入persistedState
从“js-cookie”导入*作为cookie
导出默认的新Vuex。商店({
//.
插件：[
持续状态({
存储：{
getItem: key=Cookies.get(key)，
setItem: (key，value)=Cookies.set(key，value，{ expires: 7 })，
remove item:key=cookies . remove(key)
}
})
]
})
Nuxt
因为每个请求都带有cookie，所以当您第一次进入页面时，cookie可以存储在nuxt服务器初始化方法nuxtServerInit中的vuex状态树中。
随着服务器获取cookie，JS-cookies不再适用，所以需要使用cookie-universal-nuxt:
npm安装cookie-universal-nuxt
之后，在store/index.js中：
//定义行为
常量操作={
//由nuxt提供，每次发送请求首先调用这个方法，第一个参数存储，这个方法的第二个参数是context。
nuxtServerInit({commit}，{app}) {
常量数据={}
data.accessToken=app。$cookies.get(accessToken )
//更新vuex状态树
提交(更新所有状态，数据)
}
}
应用程序。$cookies.get这里是cookie-universal-nuxt提供的获取服务器端cookie的方法。
相当于在上下文中使用req对象获取cookie :req.headers.cookie，然后解析出我们需要的对象值。
这就是问题所在。既然有原生的vuex状态持久化方法，为什么要用nuxt方法？因为创建时window对象是不能使用的(包括cookie和loaclStorage)，只能在mounted中使用，所以在页面加载的瞬间无法加载状态树，导致页面数据反馈慢。而nuxt的策略可以优化这个问题，非常人性化。
vue的vuex的数据持久化
首先，vuex是什么？Vuex是一个集中的状态管理工具，当许多页面需要共享相同或多个值/状态时会用到它。但是vuex不同于cookie和localStroage，刷新页面时状态中的数据会丢失。因此，我们需要在vuex中持久化状态。
使用插件vuex-persistedstate对数据进行数据的持久化处理
1.安装
npm安装vuex-持续状态-保存
在商店下的index.js下介绍
从“vuex-persistedstate”导入createPersistedState
使用：
//数据的持久处理
插件：[
createPersistedState({
//存储方法：localStorage、sessionStorage、cookies
存储：window.cookie，//存储在cookie中
//storage:window . sessionStorage存储到session storage。
//如果不将默认存储写入localStorage
//存储键的键值
关键字：“存储”，
呈现(状态){
//要存储的数据：这个项目使用es6扩展操作符来存储state中的所有数据。
返回{.state }；
//如果需要存储一些数据，需要单独取出。
//返回{
//仅保存状态为的评估数据
//评估数据：val .评估数据
//}
})
]
也可以使用多个插件
plugins要是一个一维数组不然会解析错误
插件：调试？[createLogger()，创建持久化]:[创建持久化]
补充，实际开发中，我们不会把所有的状态都只放在一个状态中，所以就有了模块
当我们有多个状态管理状态的时候
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入用户/user.js //这是专门管理用户的
从导入管理/admin.js //这是专门管理管理的
Vue.use(Vuex)
让storeRoot={
状态：{
},
突变：{
},
动作：{
},
模块：{
//在这里进行引用
用户，
管理
}
}
导出默认的新Vuex .Store(storeRoot) //导出
管理文件
让管理员={
命名空间：对，
状态：{
},
突变：{
},
动作：{
}
}
}
导出默认管理员
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。