Nuxt如何实现将服务测数据存储到Vuex中

 更新时间:2023年10月11日 09:28:52   作者:Endless Dreamer  
这篇文章主要介绍了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)
    })
}

这样子就可以获取了。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue插槽原理与用法详解

    Vue插槽原理与用法详解

    这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下
    2019-03-03
  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    这篇文章主要给大家介绍了关于Vue中插槽slot的使用方法与应用场景的相关资料,插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,需要的朋友可以参考下
    2021-06-06
  • vue实现移动端返回顶部

    vue实现移动端返回顶部

    这篇文章主要为大家详细介绍了vue实现移动端返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue el-checkbox实现全选单选方式

    vue el-checkbox实现全选单选方式

    这篇文章主要介绍了vue el-checkbox实现全选单选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 关于vant折叠面板默认展开问题

    关于vant折叠面板默认展开问题

    这篇文章主要介绍了关于vant折叠面板默认展开问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • antd Form组件表单在vue3中的使用方式

    antd Form组件表单在vue3中的使用方式

    这篇文章主要介绍了antd Form组件表单在vue3中的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue2和el-input无法修改和写入并且不报错的解决方案

    vue2和el-input无法修改和写入并且不报错的解决方案

    这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • Vue3中使用vue3-print-nb实现打印功能

    Vue3中使用vue3-print-nb实现打印功能

    这篇文章主要为大家详细介绍了Vue3中如何使用vue3-print-nb实现打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起参考一下
    2025-02-02
  • 深度剖析 Vue3 在浏览器的运行原理

    深度剖析 Vue3 在浏览器的运行原理

    这篇文章主要介绍了深度剖析Vue3在浏览器的运行原理,文章通过围绕主题展开相关详细介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果

    VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果

    本文主要介绍了如何在Vue中使用vue-tree-color组件实现组织架构图,并详细介绍了如何实现数据的动态加载,在动态加载数据时,要确保数据更新是在Vue的响应式系统能捕获到的情况下进行的
    2024-10-10

最新评论