Nuxt.js를 사용할 때 동적 Vuex 모듈을 초기화할 때 가장 적합한 방법은 무엇입니까?

Nuxt.js를 사용할 때 동적 Vuex 모듈을 초기화할 때 가장 적합한 방법은 무엇입니까?

최근에는 다양한 Vuex 모듈을 사용하는 대규모 애플리케이션을 구축하고 있습니다.그 중 하나를 살펴보겠습니다(예:support-chat지원 채팅은 자체 페이지에 있으며, 초기 애플리케이션 로드 시 이 모듈로 스토어를 오염시키는 것은 중복됩니다.이 모듈은 페이지가 로드되면 동적으로 등록하는 것이 목표입니다.이 모듈을 어디에, 언제, 어떻게 등록해야 하는지 묻고 싶습니다.

이 모듈을 에 등록합니다.beforeCreate페이지 구성 요소의 후크:

import supportChatModule from '@/vuex/modules/support-chat'

// ...
beforeCreate() {
  this.$store.registerModule('support-chat', supportChatModule, { preserveState: process.client })
},
beforeDestroy() {
  this.$store.unregisterModule('support-chat')
}
// ...

그 접근법에는 어떤 함정이 있습니까?

그 문제를 해결하기 위한 당신의 접근방식을 공유해 주시면 감사하겠습니다.

나는 이 문제로 오랫동안 고생했다.드디어 독특한 방법이 생각났어요.이사해서 이렇게 했어요.register그리고.unregister각 페이지의 모듈은router file(router/index.js(프로젝트 중)에beforeEach메서드 및 필요한 모듈 추가path.

• 일부 모듈은 페이지 간에 공유되므로 이 문제가 해결됩니다.
• 일부 모듈은 서버로부터 대량의 데이터를 수신합니다.이러한 데이터를 다시 수신하지 않으려면 클라이언트 측에 머무르는 것이 좋습니다.이거 냉동고랑 같이 했어요.

이 방법은 개선할 수 있습니다.

router/index.displaces

router.beforeEach((to, from, next) => {

  // unregister modules
  if (from.meta.modules) {
    for (const key in from.meta.modules.primary) {
      if (to.meta.modules && to.meta.modules.primary.hasOwnProperty(key)) {
        continue;
      }
      if (store.state.hasOwnProperty(key)) {
        // don't unregister freeze modules
        if (from.meta.modules.hasOwnProperty('freeze') && from.meta.modules.freeze.find(item => item == key)) {
          continue;
        }
        store.unregisterModule(key);
      }
    }
  }
  // register modules
  if (to.meta.modules) {
    for (const key in to.meta.modules.primary) {
      const module = to.meta.modules.primary[key]();
      if (!store.state.hasOwnProperty(key)) {
        store.registerModule(key, module.default);
      }
    }
  }
});

그리고 내 길은 이렇다.

{
  path: 'users',
  name: 'users',
  meta: {
    modules: {
      primary: {
        user: () => require('@/store/modules/moduleUser')
      }
    },
  },
  component: () => import('../views/users.vue')
},

{
  path: 'foods',
  name: 'foods',
  meta: {
    modules: {
      primary: {
        food: () => require('@/store/modules/moduleFood'),
        user: () => require('@/store/modules/moduleUser')
      },
      freeze: ['food']
    },
  },
  component: () => import('../views/foods.vue')
},

순서 1:

믹스인을 만듭니다.이름을 지었습니다.register-vuex-module.js:

export const registerVuexModule = (name, module) => ({
  beforeCreate() {
    const { $store } = this

    if ($store.hasModule(name)) $store.commit(`${name}/resetState`)
    else $store.registerModule(name, module().default)
  }
})

순서 2: mixin을 사용하여 모듈을 Import합니다.

<template>
...
</template>

<script>
// Mixins
import { registerVuexModule } from '@/mixins/register-vuex-module'

export default {
  mixins: [registerVuexModule('module-name', () => require('./vuex/MyVuexModule.js'))],
}
</script>

순서 3:

Vuex 모듈에 다음 구성 요소가 있는지 확인합니다.resetState변환 및 함수로부터 상태가 반환됩니다.예를 들면 다음과 같습니다.MyVuexModule.js다음과 같이 표시됩니다.

const initialState = () => ({
  count: null
})

export default {
 namespaced: true,

 state: initialState(),

 mutations: {
  // ...
  resetState: state => Object.assign(state, initialState())
 }
}

언급URL : https://stackoverflow.com/questions/58845658/what-is-the-best-approach-in-dynamic-vuex-module-initialisation-when-using-nuxt