Vuex와의 완벽한 논리적 디커플링

Vuex와의 완벽한 논리적 디커플링

저는 Vue Router와 Vuex로 Vue 웹 애플리케이션을 만들고 있습니다. Vue-cli를 사용하여 비계를 만들고 있습니다.프로젝트 구조의 대부분은 하나의 메인 스토어와 간단한 라우팅으로 매우 단순합니다.

project/
├── src/
│   ├── components/
│   │    ├── Hosting/
│   │    └── Website/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
└── index.html

그Hosting구성 요소, 라우팅 시간/hosting나머지 웹 사이트와 분리해야 합니다.해당 URL은 다음을 사용하여 다른 웹 사이트에 로드될 구성 요소를 호스트합니다.<iframe>이 논리 디커플링을 달성하는 가장 좋은 방법은 무엇입니까?나는 그것을 포함하는 것에 대해 생각했습니다.store의 디렉터리Hosting폴더, 하지만 그것을 어떻게 주입할지 확신할 수 없었습니다.Hosting루트 구성 요소.모듈 사용에 대해 알아봤지만, 모든 구성 요소에서 모든 모듈에 액세스할 수 있기 때문에 제가 원하는 것을 달성하지 못했습니다.

참고로 나는 실제로 그것이 필요하지 않습니다./hosting엔드포인트는 웹사이트의 다른 부분과 동일한 라우팅을 사용합니다. 왜냐하면 그것은 오직 그것으로만 접근될 것이기 때문입니다.src상당한<iframe>그래서 만약 내가 웹팩이 프로젝트를 컴파일하는 방법으로 무언가를 해야 한다면 (예를 들면,hosting.html과 더불어 표적이 되는 것index.html), 그렇게 할 수 있습니다.

당신은 요아힘이 당신에게 준 답변을 고려할 수 있습니다. 즉, 2개의 앱으로 분할하는 것이고, 저는 그것을 애플리케이션에서 하고 있습니다(웹팩에 구성 제공).

webpack.config.js

...
entry: {
    './app-1.js': './src/app1/main.js',
    './app-2.js': './src/app2/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/build/',
    filename: '[name]'
  },
...

두 앱 모두에서 동일한 스토어에 액세스해야 한다면 vuex의 모듈 솔루션을 다시 고려해야 한다고 생각합니다.스토어를 모듈로 분할하여 각 애플리케이션에 원하는 모듈을 로드하고 있습니다(라이프사이클 생성 전 후크의 App.vue에 있음).다음과 같이 보입니다.

main1.js

import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';

new Vue({
  el: '#app2',
  store: store,
  render: h => h(App)
});

메인 2.js

import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';

new Vue({
  el: '#app1',
  store: store,
  render: h => h(App)
});

(두 앱 모두 동일한 스토어를 로드합니다.) 다음을 수행합니다.

앱 1.vue

export default {
...
    beforeCreate() {
      // this is where we add dynamically specific modules used on this app.
      const store = this.$store;
      const modulesToBoDynamicallyRegistered = {
        [Types.module1.TYPE_NAME]:         module1,
        [Types.module2.TYPE_NAME]:         module2,
        [Types.module3.TYPE_NAME]:         module3,
        [Types.module4.TYPE_NAME]:         module4,
      };

      Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
        utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
      });
    },
...
}

앱2.vue

export default {
...
    beforeCreate() {
      // this is where we add dynamically specific modules used on this app.
      const store = this.$store;
      const modulesToBoDynamicallyRegistered = {
        [Types.module7.TYPE_NAME]:         module7,
        [Types.module9.TYPE_NAME]:         module9,
      };

      Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
        utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
      });
    },
...
}

저장소 자체에는 다음과 같은 공통 모듈이 저장됩니다.

store.js

import Vue from 'vue';
import Vuex from 'vuex';

import module5 from './modules/module5/index';
import module6 from './modules/module6/index';

Vue.use(Vuex);

export const store = new Vuex.Store({
  modules: {
    module5,
    module6,
  }
});

당신이 필요하시면registerModuleIfNotExists함수:

registerModuleIfNotExists: (store, moduleName, module) => {
    if (!(store && store.state && store.state[moduleName])) {
        store.registerModule(moduleName, module);
      } else {
        // re-use the already existing module
        throw `reusing module: ${moduleName}`;
      }
  },

호스팅 구성 요소를 완전히 별도의 앱으로 간주하면 다른 사이트에서도 호스팅할 수 있습니다.예, iframe 및 다른 사이트에 표시할 hosting.html 페이지를 만듭니다.

이렇게 하면 구성 요소의 사용법이 다른 사이트에서 호스팅되는 방식과 완전히 일치하고 버그를 쉽게 찾을 수 있습니다.

호스팅 구성 요소에 포함된 구조의 데이터나 매개 변수가 필요한지 여부는 언급하지 않았지만, 필요한 경우 hosting.html의 쿼리 문자열에 이 매개 변수를 제공해야 합니다.

언급URL : https://stackoverflow.com/questions/49229306/complete-logic-decoupling-with-vuex