Vuex 스토어를 복사하여 새 스토어로 Import 방법

Vuex 스토어를 복사하여 새 스토어로 Import 방법

IPC를 사용하여 Vuex 커밋을 한 창에서 다른 창으로 복제하는 방법을 Electron에서 작성하려고 합니다.이렇게 하면 개발자는 IPC 호출을 사용하여 모든 것을 수동으로 전송하지 않고도 브라우저 창 간에 Vuex 저장소를 심리스하게 사용할 수 있으므로 많은 코드가 중복됩니다.

지금까지 푸시 커밋을 처리하는 기본적인 Vue 플러그인을 작성했습니다.

store.subscribe를 사용하는 일부 기본 코드만 사용하면 I IPC는 모든 커밋을 메인(main)으로 전송하고 모든 렌더러 창에 커밋을 전송하여 각각의 스토어에 커밋을 적용합니다.각각의 새로운 브라우저 Windows는 데이터를 다른 모든 브라우저로 전송할 수 있습니다.무한 루프를 방지하기 위해 이벤트와 payload를 확인하고 현재 값과 다른지 확인한 후 적용합니다.

이 모든 것이 효과가 있다.놀랍도록 느리지도 않아요.그런데 창문이 열리면 가게가 신선하다는 문제가 있어요.스토어 전체를 내보내고 IPC를 새 창으로 전송하여 스토어를 Import하는 방법이 필요합니다.

Vuex에서 상태 전체를 일반적으로 내보낸 후 다시 가져올 수 있는 방법이 있습니까?

잠시 후 메인 창과 다른 IPCRenderer 창 간에 vuex 스토어를 동기화하는 방법을 찾았습니다.문제는 상태 교체이기 때문에 플러그인을 사용하여 변환에 가입하는 방법을 설명하지 않을 것입니다.다음은 newWindow에서 상태를 바꾸기 위한 논리 단계입니다.

1. 메인 창에서 새 창을 열 때 IPCRender를 호출하여 전체 상태(이것)를 전송할 수 있습니다.$store.state)

예를 들어 다음과 같습니다.

this.ipcRenderer.send("open-new-window",cloneObject(this.$store.state));

여기서 주의할 점은 순환 JSON 오류가 발생하기 때문에 DOM 개체와 같은 복잡한 개체를 새 창에 보낼 수 없었기 때문에 스크립트(UTIL.clone Object(이것))를 사용합니다.$store.state)는 순환 JSON 오류를 피하기 위해 복잡한 개체를 변환합니다.이 질문은 circular json으로 변환하는 것이 아니기 때문에 여기서 코드를 보거나 다른 장소에서 찾을 수 있습니다.

2. ipcMain에서는 이 상태를 글로벌 변수에 저장할 수 있습니다.다음은 예를 제시하겠습니다.

let temporaryState
ipcMain.on('open-new-window', async(event, data) => {
  //Another code...
  newWindow = new BrowserWindow(options);
  temporaryState = data 
   //this is data is your temporary state from mainWindow
  //Another code for open new window
})

3. 새 창이 이미 "마운트된 단계"에 있는 경우 새 창의 상태를 재수화하도록 요청합니다. 예를 들어 다음과 같습니다.

mounted() {
  this.ipcRenderer.send("ask-rehydrate");
}

4. ipcMain으로 돌아가면 newWindow로부터의 재하이드 요청을 듣고 글로벌 변수에 이미 저장되어 있는 상태를 전송할 수 있습니다.다음은 예를 제시하겠습니다.

ipcMain.on('ask-rehydrate', (event) => {
  newWindow.webContents.send("currentState", temporaryState);
}

5. 마운트된 스테이지에서 다시 청취하여 "new Window"의 현재 스테이지를 교체합니다.

mounted() {
  this.ipcRenderer.send("ask-rehydrate");
  this.ipcRenderer.once("currentState", (event, state) => {
       new Promise((resolve, reject) => {
       logger.debug("Current state will be replaced with %o", state);
       this.$store.replaceState(state);
       resolve();
   }).then(() => {
       //Do something});
   });
}

축하합니다. new Window의 상태가 메인창의 현재 상태로 바뀝니다.플러그인을 사용하여 변환을 서브스크라이브하면 변환도 동기화됩니다.스토어가 이미 시작될 때까지 기다려야 하므로 vue 마운트 단계에서 이 작업을 수행해야 합니다.

언급URL : https://stackoverflow.com/questions/63818597/how-to-copy-a-vuex-store-and-import-it-into-a-new-store