Nuxt如何实现将服务测数据存储到Vuex中
Nuxt将服务测数据存储到Vuex中
Nuxt
中有个nuxtServerInit
方法。
Nuxt 调用它的时候会将页面的context上下文对象作为第2个参数传给它(服务端调用),与fetch一样,不包括context.redirect和context.error方法,当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取。
const actions = { nuxtServerInit({ commit}, {req}) { console.log('req.session', req.session) } }
注:必须配置在Vuex中的index配置。
Nuxt使用Vuex持久化踩坑
在使用nuxt中我们没办法去使用sessionStorage和localStorage去进行储存一些数据例如token,
这个时候我们可以使用Vuex持久化,我们可以使用vuex-persistedstate。
在plugins文件下我们创建一个vue-persistedstate.js文件进行全局:大概代码如下
// 引入插件 import createPersistedState from 'vuex-persistedstate' // 把翻转好的Store引入 import { Store } from '~/store'; // 把引入的Store储存一下 var stores=Store export default ({ Store }) => { window.onNuxtReady(() => { createPersistedState({ key: "Store", // 读取本地存储的数据到store })(stores) }) }
vue-persistedstate.js完成以后我们在nuxt.config.js文件下
plugins: [ { src:'@/plugins/element-ui'}, { src: '@/plugins/vue-persistedstate.js', ssr: false } ],
这样子我们可以在其他组件上使用但是使用时会遇到一个问题
// 没有Store.state是可以看到我们vuex里是有储存数据的 console.log('Store',Store); // 但是我们Store.state以后就拿不到数据了 console.log('Store.state',Store.state);
Store.state的里面没有数据例如我在login文件下储存了token,可以通过Store.state.login.token获取到,但是Vuex持久化以后Store.state.login.token获取到的是undefined我在生命钩子中mounted里面的获取调用的,
解决方法
我们给他加个定时器就可以了,但是这样子又有一个问题了,我们在axios请求拦截时虽然可以通过定时器获取但是会影响数据返回,这个时候我们可以在我们之前翻转好的里面让他变成同步操作
import createPersistedState from 'vuex-persistedstate' import { Store } from '~/store'; var stores=Store export default ({ Store }) => { // 把async和await加上 window.onNuxtReady(async() => { await createPersistedState({ key: "Store", // 读取本地存储的数据到store })(stores) }) }
这样子就可以获取了。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3+Element-plus项目自动导入报错的解决方案
vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于Vue3+Element-plus项目自动导入报错的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07浅谈vue的props,data,computed变化对组件更新的影响
本篇文章主要介绍了浅谈vue的props,data,computed变化对组件更新的影响,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论