How to keep Vuex status safe in NUXT+express

A novice learning vue+nuxt;
encounters a problem and is confused for a long time. When refreshing the page, the vuex state security problem in nuxt;
problem 1, cooperate with the plug-in vuex-persistedstate for localization, but in store/index.js, setting the plug-in causes the window object not to be found. How can I use vuex-persistedstate without making mistakes?
problem 2. When storing only a small amount of critical data (such as login uuid and user name), use fetch to request the server to find the key data (such as / api/getUserInf). Where should fetch be placed in the project structure? Is it placed at a higher level of the framework? Or will store be placed in any component that needs to be used?
question 3. Is fetch running on the client or the server?
question 4. NuxtServerInit. If it is an encrypted cookie, the userID cannot be extracted from the nuxtServerInit. Is there a way to solve this problem?

Express vue.js nuxt.js

Apr.19,2022

1. If you are using Nuxtjs, configure the plug-in:

plugins: [
    { src: '~/plugins/localStorage.js', ssr: false }
]

then, in localStorage.js:


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

let cookieStorage = {
  getItem: function(key) {
    return Cookies.getJSON(key);
  },
  setItem: function(key, value) {
    return Cookies.set(key, value, {expires: 3, secure: false});
  },
  removeItem: function(key) {
    return Cookies.remove(key);
  }
};

export default (context) => {
  createPersistedState({
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem
  })(context.store);
};

2. The fetch of Nuxtjs is only used for store and cannot be used to set data. You can use AsyncData to set data, which can be used in routing pages.
III. Fetch official documents are very clear: server or before switching to the destination route
IV. Users can log in using nuxtServerInit+express session.

Previous: Antd cannot use the onclick event and style property when using ts,List.Item

Next: The cordova page is stuck.

Nuxt.js plus express as the background interface, how to set the total route of Nuxt?
the default route is app.use (nuxt.render); the display effect is 127.0.0.1virtual 3000 but I want 127.0.0.1:3000 admin how should I change it? app.use ( admin ,nuxt.render) will report the file under _ nuxt if it is used in this way. how...

Express vue.js nuxt.js node.js

Mar.12,2021