웹 소켓 돌연변이를 사용하여 vuex를 구성하는 방법

웹 소켓 돌연변이를 사용하여 vuex를 구성하는 방법

vue+vuex+vue-native-websocket을 사용합니다.vuex에서 웹 소켓 메시지를 처리하는 문서에 따르면 SOUTE_... 돌연변이를 사용해야 합니다.

지금은 store/index.js 파일에 있는 모든 메시지를 다음과 같이 처리합니다.

mutations: {
...
SOCKET_ONMESSAGE(): {
    switch(message.cmd) {
        case 'userRsp'
        ...
        case 'connectionRsp'
        ...
        case 'otherDataRsp'
        etc.
    }
}

원하는 것은 user.js vuex 모듈의 모든 사용자 관련 데이터와 connections.js vuex 모듈의 모든 연결 데이터를 처리하는 것입니다.

각 컴포넌트 내에서 SOKET_ONMESSAGE를 사용해야 합니까?이 경우 테스트 결과 ON_MESSAGE는 메시지가 아닌 모듈에서도 호출됩니다.

vue-native-websocket readme에서 다음을 수행합니다.

형식 포함:'json'가능한

[...]

가 있는 경우.namespace이 데이터에서는, 메세지가 송신됩니다.namespaced: truestore(스토어 모듈에서 이 기능을 켜야 합니다).

가 있는 경우.mutation응답 데이터의 값, 대응하는 돌연변이가 이름과 함께 호출됩니다.SOCKET_[mutation value]

이 있는 경우.action값, 즉 반응 데이터, 즉. action: 'customerAdded'대응하는 액션은 이름으로 호출됩니다.

actions: {
  customerAdded (context) {
    console.log('action received: customerAdded')
  }
}

를 사용하는 경우json포맷 옵션:

Vue.use(VueNativeSock, 'ws://localhost:9090', { format: 'json' })

그런 다음 다음 다음 작업을 수행할 수 있습니다.namespace그리고.mutation또는action이름을 입력하면 스토어 모듈에서 올바른 함수를 호출할 수 있습니다.

백엔드가 응답에 네임스페이스 속성을 삽입해야 한다는 의미입니까?

네. 예를 들어 백엔드는namespace: "user"같은 이름의 모듈을 호출하기 위한 데이터입니다.

---

백엔드가 메시지를 처리해야 할 프런트엔드의 핸들러를 정의하는 것은 잘못된 관행 아닌가요?

백엔드는 여러 애플리케이션에서 사용됩니까?직접 짓지 않는 거?그렇지 않은 경우 백엔드와 프런트엔드는 동일한 응용 프로그램입니다.

백엔드에서 너무 상세하게 설명하는 것을 피하기 위해서는namespace프런트엔드에서 처리하도록 하고 있지만 액션을 말하는 것이 더 쉬울 것입니다.이것들은 일반적인 속성명이기 때문에 너무 결합되어 있지 않습니다.

언급URL : https://stackoverflow.com/questions/49629494/how-to-organize-the-vuex-with-websocket-mutations