如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

关键词：

【中文标题】如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据【英文标题】：How to get localstorage data inside vuex state with Nuxt.js 【发布时间】：2019-06-11 13:32:09 【问题描述】：

我正在使用 Nuxt 构建一个购物车。但是当我刷新页面时，购物篮会自动清空。

我尝试像 vuex-persist ， vuex-persistedstate ... 但我没有解决办法。

现在我正在寻找一种直接从本地存储中获取购物车初始状态的方法。

state: 
      cart: [] //here what i want => window.localStorage.getItem("cart")
    

非常感谢。

【问题讨论】：

【参考方案1】：

您只能在浏览器中访问 localStorage。它在 s-s-r 期间无法访问。 因此，您需要在 vuex 存储中创建一个突变，它将执行您想要的操作并将其提交到挂载的钩子中（挂载仅在浏览器中执行）。

例如

...
mounted() 
 this.$store.commit('myMutation', window.localStorage.getItem("cart")

【讨论】：

谢谢@Aldarund，我会这样做的。【参考方案2】：

使用 nuxt-vuex-localstorage 它工作得很好并且与 vuex 同步

【讨论】：

使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”

】使用Jest测试NUXT.js和Vue.js应用程序。获取“在mapState()中找不到[vuex]模块命名空间”和“[vuex]未知操作类型”【英文标题】：TestingaNUXT.jsandVue.jsappwithJest.Getting\'[vuex]modulenamespacenotfoundinmapState()\'and\'[vuex]unknownactiontype\'【发布时间... 查看详情

在 Nuxt JS vuex 中使用 Vue Router 重定向

】在NuxtJSvuex中使用VueRouter重定向【英文标题】：RedirectusingVueRouterinNuxtJSvuex【发布时间】：2020-01-1110:19:19【问题描述】：我正在构建一个登录/注册系统作为应用程序的一部分。我正在使用Firebase和Vuex来处理身份验证和数据库信息... 查看详情

如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

】如何在Nuxt.js中使用v-file-input获取文件对象？【英文标题】：Howtogetfileobjectusingv-file-inputinNuxt.js?【发布时间】：2021-03-1904:22:17【问题描述】：我使用了Vuetify.js作为Nuxt.Js的UI框架。当我输入文件我的应用程序时，我想获取文件对... 查看详情

在 vuex 操作中访问 this.$fireStore (Nuxt.js)

】在vuex操作中访问this.$fireStore(Nuxt.js)【英文标题】：Accessthis.$fireStoreinvuexaction(Nuxt.js)【发布时间】：2020-07-1603:20:31【问题描述】：Here声明$fireStore可以在vuexaction中访问：asyncrandomVuexAction(commit,state,rootState,userId)constref=this.$fire 查看详情

使用 nuxt-auth 成功认证后如何获取用户信息

】使用nuxt-auth成功认证后如何获取用户信息【英文标题】：Howtogetuserinfoafterasuccessfulauthenticationwithnuxt-auth【发布时间】：2021-09-0818:25:57【问题描述】：我正在使用nuxt.js，在我向后端发送带有电子邮件和密码的登录请求后，我收到... 查看详情

如何在 Nuxt 中用一个组件创建无限路由

】如何在Nuxt中用一个组件创建无限路由【英文标题】：HowcreatetheinfiniteroutewithonecomponentinNuxt【发布时间】：2021-10-1415:29:07【问题描述】：我最近收到了一个使用Nuxt.js的项目，但遇到了一些问题。我有一个从API获取一些产品并从Vu... 查看详情

使用 Nuxt.js 时动态 Vuex 模块初始化的最佳方法是啥？

】使用Nuxt.js时动态Vuex模块初始化的最佳方法是啥？【英文标题】：WhatisthebestapproachindynamicVuexmoduleinitialisationwhenusingNuxt.js?使用Nuxt.js时动态Vuex模块初始化的最佳方法是什么？【发布时间】：2020-03-0918:07:44【问题描述】：最近，我... 查看详情

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

...处理初始页面渲染。但它适用于经典模式。以下代码是我使用的流程。我的api调用api/CategoryApi.jsimportax 查看详情

如果在模板中使用变量获取错误未定义，则异步 vuex 获取操作状态已填充

】如果在模板中使用变量获取错误未定义，则异步vuex获取操作状态已填充【英文标题】：asyncvuexfetchactionstatefilledifusingvariableintemplategettingerrorundefined【发布时间】：2019-02-1509:45:20【问题描述】：我有一个异步操作vuex，我使用mapge... 查看详情

无法在 Vuex 中使用 getter 获取商店状态，然后承诺

】无法在Vuex中使用getter获取商店状态，然后承诺【英文标题】：CannotgetstorestateswithgettersinVuexwithpromisethen【发布时间】：2021-04-2712:16:45【问题描述】：由于我想检查他们输入的频道路由是否需要PIN码，我使用router.beforeEach如下：ro... 查看详情

如何在 Vue 3 组件中使用 Vuex 4 状态数据作为另一个调度的有效负载？

】如何在Vue3组件中使用Vuex4状态数据作为另一个调度的有效负载？【英文标题】：HowtouseVuex4statedatainsideVue3componentaspayloadforanotherdispatch?【发布时间】：2021-05-2320:32:15【问题描述】：我正在使用Vue3组合API和Vuex4中的useStore钩子这就... 查看详情

Vuex Mutation 不适用于 Nuxt.js

...可能有一个非常简单的解决方法。我有两个中间件，一个使用AXIOS对github进行api调用，另一个从medium.com用户的RSS提要中提取并转换为JSON。提交存储时github突变工作正常，中等突变不提交存储 查看详情

如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

】如何在Nuxt.jsNuxt/Content博客中使用内容文件夹中的图像设置og:image【英文标题】：Howtosetog:imageinNuxt.jsNuxt/Contentblogwithimagesincontentfolders【发布时间】：2021-11-1613:54:36【问题描述】：如何获取已部署图像的最终位置的字符串表示形... 查看详情

如何使用 Nuxt.js 仅在一个组件中使用插件？

】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情

store/ 的 Vuex 经典模式已弃用，将在 Nuxt 3 中删除

】store/的Vuex经典模式已弃用，将在Nuxt3中删除【英文标题】：VuexClassicmodeforstore/isdeprecatedandwillberemovedinNuxt3【发布时间】：2019-12-3103:59:32【问题描述】：我有以下文件，但找不到警告“存储/的经典模式已弃用并将在Nuxt3中删除”... 查看详情

如何在 nuxt.js 上从子组件获取父组件的值？

】如何在nuxt.js上从子组件获取父组件的值？【英文标题】：HowtogetanvaluefromChildcomponenttoParentonnuxt.js?【发布时间】：2019-11-3022:31:48【问题描述】：我一直在尝试将数据从子A($emit)组件传递给父组件，从父组件传递给子B(props)。使用n... 查看详情

nuxt-nuxtserverinit&页面渲染前的store处理&context

参考技术A状态书文件中指定了nuxtServerInit方法，Nuxt,js调用它的时候会将页面的context上下文对象作为第2个参数传给它（服务端调用）[与fetch一样，不包括context.redirect和context.error方法]，当我们想要将服务端的一些数据传到客户端... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

】如何测试nuxt.jsasyncData并获取钩子【英文标题】：Howtotestnuxt.jsasyncDataandfetchhooks【发布时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我... 查看详情