我想在Nuxt.js中的Vuex中使用window.localStorage [英] I want to use window.localStorage in Vuex in Nuxt.js

问题描述

我正在开发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持久状态将是您方案的最佳用例.

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 })
         })
      ]
}); 

您还需要 js-cookie 软件包，该软件包使处理cookie更加容易.使用npm install --save js-cookie.

You also need js-cookie package which makes handling cookies easier. Use npm install --save js-cookie.

如果您在商店中使用模块，则定义要持久保存的拍拍的方法如下:

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 })
         })
      ]
}); 

在您的路径中，您将以要保留的状态引用模块的属性.在上面的示例中，您提到的 myModule 的状态的属性得以保留.由于路径中未提及 myAnotherModule 状态，因此未保存.

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持久状态和

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在 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！