Nuxt 유니버설 앱서버 측 Vuex 스토어는 사용자의 머신에 관계없이 요청 간에 캐시됩니다.

Nuxt 유니버설 앱서버 측 Vuex 스토어는 사용자의 머신에 관계없이 요청 간에 캐시됩니다.

Nuxt Universal Apps의 프로덕션 인스턴스에서 다음과 같은 동작을 관찰했습니다.

---

"사용자 A"는 다음과 같은 nuxt의 서버 측 및 서버 측 메서드에 액세스하는 페이지 요청을 합니다.asyncData를 디스패치합니다.

"사용자 A"가 이전에 변경한 상태 데이터에 대해 서버 측 방법을 통해 서버에 요청을 할 경우,

「사용자 B」가 그 데이터에 액세스 할 수 있게 됩니다.

---

ergo nuxt는 Vuex를 서버상의 단일 스토어로 취급하며 다른 발신자를 구별하지 않습니다.

이러한 동작을 방지하고 각 사용자가 로컬 머신과 관련된 데이터에만 액세스할 수 있도록 하는 구성 가능한 방법이 있습니까?

[EDIT] 요청하신 대로 스토어 인덱스의 근사치입니다.js

import { omit } from 'lodash'
import Vue from 'vue'

// we drafted some methods for automatically generating generic getters and setter-mutators.  
// Also, default actions are setup where a list of names are given, that automatically commit to generic setter mutators. 
// see comments in the code below...
import {
  autoMapGetters,
  autoMapMutations,
  autoMapActions
} from '~/libs/autoMap'

const _state = {
  centre: { id: -1 },
  devEmail: 'foo@bar.com',
  barApiUrl: process.env.FooUrl + '/foo',
  barDownloadImg: process.env.FooUrl + process.env.FooImg,
  barDownloadLockImg: process.env.FooUrl + process.env.FoobarDownloadLockImg,
  FooLoginUrl: process.env.FooUrl + '/foo/auth',
  FooBarUrl: process.env.FooUrl + '/bar',
  FooUrl: process.env.FooUrl,
  loading: false,
  warnings: {}
}

export default {
  state: () => (_state),

  getters: autoMapGetters(_state, {
    foo: (state) => state.foo.someSpecialProperty ? { foo: 'I am different' } : {},
    etc: (state) => etc
    // For example, autoMapGetters will set:
    // centre: (state) => state.centre
  }), 

  mutations: autoMapMutations(_state, {
    clearWarning (_state, key) { Vue.delete(_state.warnings, key) },
    clearWarnings (_state) { _state.warnings = {} },
    setWarning (_state, { key, value }) { _state.warnings[key] = value }
    // For example, a autoMapMutations will generate:
    // setCentre (state, centre) { state.centre = centre }  
  }),

  actions: autoMapActions(_state, {
    // special action, launched server-side ------------------------------------
    nuxtServerInit ({ state, commit, getters, dispatch }, { params }) {
      dispatch('foo-module/resetAll')
      dispatch('foo-module/resetMainInformation')
    },
    
    // Normal actions ----------------------------------------------------------
    clearCentre ({ commit }) { commit('setCentre', { id: -1 }) },
    setCentre ({ commit, dispatch }, centre) {
      commit('setCentre', omit(centre, 'user'))
      dispatch('bar-module/setUser', centre.user)
    },
    clearWarning ({ commit }, key) { commit('clearWarning', key) },
    clearWarnings ({ commit }) { commit('clearWarnings') },
    setWarning ({ commit }, { key, value }) { commit('setWarning', { key, value }) }
    // For Example, autoMapActions will generate:
    // setLoading ({ commit }, value) { commit('setLoading', value) }
  }, [
    'loading',
    'warnings'
  ])
}

문서**에서는 명확하지 않지만 스토어를 객체가 아닌 함수(명시적 또는 암묵적 반환 포함)로 내보내야 합니다.함수로 내보내면 서버에 새 저장소가 생성되지만 일반 개체로 내보내면 항상 동일한 개체가 반환됩니다.

**편집: 이 점을 강조하기 위해 문서가 갱신된 것 같습니다.

다음은 문서의 예입니다.

export const state = () => ({
  list: []
})

점에 주의:()브젝 를리 ?터 터? ???

이 점을 염두에 두고 코드를 조정해 보십시오(의사 코드 예, 상태를 자동 맵 방식으로 전달할 수 있을 것입니다).

import { omit } from 'lodash'
import Vue from 'vue'

import {
  autoMapGetters,
  autoMapMutations,
  autoMapActions
} from '~/libs/autoMap'

export const state = () => ({
  centre: { id: -1 },
  devEmail: 'foo@bar.com',
  barApiUrl: process.env.FooUrl + '/foo',
  barDownloadImg: process.env.FooUrl + process.env.FooImg,
  barDownloadLockImg: process.env.FooUrl + process.env.FoobarDownloadLockImg,
  FooLoginUrl: process.env.FooUrl + '/foo/auth',
  FooBarUrl: process.env.FooUrl + '/bar',
  FooUrl: process.env.FooUrl,
  loading: false,
  warnings: {}
})

export const getters = {
   // ... your automap method here
}

export const mutations = {
  // ... your automap method here
}

export const actions = {
  // nuxtServerInit etc ...
}

언급URL : https://stackoverflow.com/questions/66440978/nuxt-universal-app-vuex-store-on-server-side-is-cached-between-requests-irrespe