我想在 Nuxt.js 的 Vuex 中使用 window.localStorage

问题描述

我正在开发 nuxt.js 应用程序.点是登录 &退出.

I developing nuxt.js app. And point is login & logout.

我们将开发登录 JWT 系统.

We will develop a login to the JWT system.

您必须在 vuex 中保持登录状态.

You must remain logged in at vuex.

然而，当我刷新页面时，vuex 被初始化.

However, when I refresh the page, vuex is initialized.

我已经阅读了 git vuex-persistedstate ，但很难理解如何初始化并设置它.

I've read git vuex-persistedstate , but it's hard to understand just how to initialize and set it.

在 nuxt.js 中开发登录系统的最佳方式是什么?

What is the best way to develop a login system in nuxt.js?

谢谢.

推荐答案

使用 vuex-persisted state 将是您的场景的最佳用例.

Using vuex-persisted state would be the best use case for your scenario.

我将引导您完成使用 vuex 持久化状态的过程.

I will walk you through the process of using vuex-persisted state.

1. 打开命令行，cd到你的项目目录，然后输入npm install --save vuex-persistedstate.这会将 vuex-persistedstate 安装到您的项目依赖项中.
2. 现在在您的 store.js 文件或您定义 vuex 商店的任何地方，添加 vuex-persistedstate 插件

1. Open command line, cd to your project directory, then enter npm install --save vuex-persistedstate. This will install vuex-persistedstate into your project dependencoes.
2. Now in your store.js file or wherever your defined your vuex store, add the vuex-persistedstate plugin

import createPersistedState from "vuex-persistedstate";
import * as Cookie from "js-cookie";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    user: {
      name: "john doe",
      age: " 16",
    },
    loggedIn: false,
    hobbies: ["eating", "partying"],
  },
  plugins: [
    createPersistedState({
      paths: ["user", "loggedIn"],
      getState: (key) => Cookie.getJSON(key),
      setState: (key, state) =>
        Cookie.set(key, state, { expires: 1, secure: false }),
    }),
  ],
});

1. 您还需要 js-cookie 包，它可以更轻松地处理 cookie.使用 npm install --save js-cookie.
2. paths 属性表示状态的哪些部分要持久化，在我们的例子中保存为 cookie.如果没有给出 path 属性，那么整个状态将被持久化
3. 在上面的例子中我们提到了路径paths: ['user', 'loggedIn']，所以只有user和loggedIn状态的属性保存在 cookie 中，而不是 爱好.
4. 如果您在商店中使用模块，则定义要持久化的 pats 的方法如下:

1. You also need js-cookie package which makes handling cookies easier. Use npm install --save js-cookie.
2. The paths property says which parts of the state to persist, in our case save as cookies.If no path property is given, then the whole state is persisted
3. From the above example we have mentioned the paths paths: ['user', 'loggedIn'], so only user and loggedIn properties of the state are saved in cookies not hobbies.
4. In case you are using modules in your store, the way of defining the pats to persist would be as follows:

import createPersistedState from "vuex-persistedstate";
import * as Cookie from "js-cookie";

import myModule from "./myModule";
import myAnotherModule from "./myAnotherModule";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    user: {
      name: "john doe",
      age: " 16",
    },
    loggedIn: false,
    hobbies: ["eating", "partying"],
  },
  modules: {
    myModule,
    myAnotherModule,
  },
  plugins: [
    createPersistedState({
      paths: ["user", "loggedIn", "myModule.<nameOfThePropretyInState>"],
      getState: (key) => Cookie.getJSON(key),
      setState: (key, state) =>
        Cookie.set(key, state, { expires: 1, secure: false }),
    }),
  ],
});

1. 在您的路径中，您将在要保留的状态下引用模块的属性.在上面的例子中，你提到的 myModule 状态的属性被持久化.myAnotherModule 状态未保存，因为路径中未提及它.

1. In your paths you will refer to the module's property in the state you want to persist. In the above example, the property of the state that you mention of myModule is persisted. myAnotherModule state is not saved since it is not mentioned in the paths.

就是这样.如果你想自定义使用vuex-persisted state和js-cookie，看看他们的文档.

That's it . If you want to customize the way you use vuex-persisted state and js-cookie, have a look at their documentation.

如果您想检查您想要的状态是否保存在 cookie 中，那么您可以控制台记录您的 cookie，如下所示:console.log(document.cookie in your App.vue created() 生命周期钩子

If you want to check whether your desired state is saved in cookies then you can console log your cookies like this: console.log(document.cookie in your App.vue created() lifecycle hook

这篇关于我想在 Nuxt.js 的 Vuex 中使用 window.localStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！