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

Question

我正在开发nuxt.js应用程序.点是登录和注销.

---

我们将开发JWT系统的登录.

您必须保持登录vuex.

但是,当我刷新页面时,会初始化vuex.

我读过git vuex-persistedstate,但很难理解如何初始化和设置它.

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

谢谢.

Answer 1

使用vuex-persisted状态将是您的方案的最佳用例.

我将引导您完成使用vuex-persisted状态的过程.

1. 打开命令行,cd到项目目录,然后输入npm install --save vuex-persistedstate.这会将vuex-persistedstate安装到您的项目依赖项中.

2. 现在,在store.js文件中或您定义的vuex商店的任何位置,添加vuex-persistedstate插件

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

3. 您还需要js-cookie包,这样可以更轻松地处理cookie.使用npm install --save js-cookie.

4. paths属性说明状态的哪些部分要保留,在我们的例子中保存为cookies.如果没有给出路径属性,则整个状态保持不变
5. 从上面的例子中我们已经提到了路径paths: ['user', 'loggedIn'],因此只有状态的user和loggedIn属性保存在cookie而不是爱好中.

6. 如果您在商店中使用模块,定义拍子的方式将保持如下:

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

7. 在您的路径中,您将在要保留的状态中引用模块的属性.在上面的示例中,您提到myModule的状态的属性是持久的.myAnotherModule状态未保存,因为路径中未提及该状态.

8. 而已 .如果要自定义使用vuex-persisted状态和js-cookie的方式,请查看其文档.

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