vuex에서 유휴 상태 재설정을 구현하는 방법

이 글에서는 주로 vuex 유휴 상태 재설정 솔루션을 소개하고 참고용으로 제공합니다.

머리말

대규모 단일 페이지 애플리케이션(이하 스파)에서는 상태 공유 및 구성 요소 간 상태 전송과 같은 문제를 해결하기 위해 상태 관리자 vuex를 사용하는 경우가 많습니다. 이러한 종류의 응용 프로그램은 수십 개의 단일 페이지에서 수백 개의 단일 페이지까지 다양합니다. 경로가 자주 전환되면 각 경로에 해당하는 vuex의 상태가 점점 더 많아질 것입니다. 페이지의 궁극적인 최적화를 달성하려면 유휴 상태를 재설정하여 점유된 메모리 공간을 줄여야 합니다.

무슨 상태를 재설정할 수 있나요?

vuex는 애플리케이션의 모든 구성 요소 상태를 관리하기 위해 중앙 집중식 저장소를 사용하는 것을 강조하지만 실제로 처리를 위해 모든 상태를 저장소에 넣으면 개발이 매우 어렵다는 것을 알게 될 것입니다. 아픈. 관리를 위해 어떤 데이터를 저장소에 넣어야 하는지 잘 제어하려면 먼저 vuex를 사용하여 해결하는 문제가 무엇인지 이해해야 합니다. vuex 공식 웹사이트에서는 여러 구성 요소 공유 상태 문제를 해결하기 위해 여러 구성 요소의 공유 상태를 관리용 저장소에 넣을 수 있다고 지적합니다. 교차 라우팅 구성 요소. 저장소가 여러 구성 요소가 공유하는 상태만 저장하는 경우 vuex에서 상태를 정리할 필요가 없습니다. 이러한 상태는 언제든지 사용되기 때문입니다.

비즈니스 시나리오가 점점 더 복잡해짐에 따라 백엔드와 상호 작용하기 위한 많은 로직도 구성 요소에 배치되므로 코드가 매우 지저분해지고 vuex가 완전히 활용되지 않습니다. 이때 백엔드 API와의 상호작용 로직을 vuex의 액션에 넣어 처리하면 되고, 백엔드에서 반환된 상태는 자연스럽게 매장 관리에 들어가게 됩니다. 이 처리 후에 구성 요소는 데이터 렌더링만 담당하며 논리는 매우 명확합니다. 이때 저장소에는 라우팅 스위치와 같은 구성 요소에 해당하는 상태가 점점 더 많아지고 이러한 상태는 수동으로 정리해야 합니다.

많은 솔루션에는 장단점이 있습니다. 백그라운드 API와 상호 작용하는 데이터를 구성 요소에 넣으면 정리할 필요가 없지만 코드 논리가 지저분해집니다. 또한 vuex와 같은 플러그인 vue-devtools는 각 요청 데이터의 변경 사항을 모니터링할 수 없습니다...

상태를 재설정할 시기

우리가 원하는 효과는 이전 경로에 대응하는 것입니다. 경로가 전환되면 vuex의 상태가 재설정되지만 라우팅과 vuex 사이에는 일대일 대응이 없습니다. 이 효과를 얻으려면 라우팅과 vuex 모듈 간의 대응을 유지해야 합니다. 매우 번거로울 것입니다. 경로가 변경되면 vuex의 모든 상태를 재설정하는 것이 좋습니다.

vuex에서 유휴 상태를 지우는 방법

다음은 설명을 위해 내 github 예제와 결합됩니다. 이 예제에서는 경로를 전환할 때 유휴 상태를 지웁니다.

루트에 해당하는 컴포넌트의 모듈 상태를 변환

예시에서는 스토어가 여러 모듈로 분할되어 해당 루트에 해당하는 컴포넌트 상태가 해당 모듈에 배치되고 여러 상태가 공유됩니다. 구성 요소는 최상위 저장소 관리에 배치됩니다. 대략 다음과 같습니다.

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: { // 每个路由对应的 module
    page1,
    page2,
    page3,
    page4,
    page5
  },
  plugins: __DEV__ ? [createLogger()] : [],
  strict: __DEV__ ? true : false
});

경로 페이지 1에 해당하는 모듈의 상태는

// store/modules/page1.js
const state = {
   // 列表数据
   page1Data: [],
   // 标题数据
   page1Title: ''
}

경로가 변경될 때 이 데이터를 재설정하면 백엔드 API를 호출하여 반환되고 복사됩니다. 초기화 데이터를 추출하고 재설정해야 하는 식별 메서드 initState()를 노출해야 합니다. 즉, 경로가 변경되면 재설정해야 함을 의미합니다. 물론 이 메서드의 이름은 관례이며, 그렇게 할 수도 있습니다. 다른 이름으로 정의해 보세요. 변환 후:

// store/modules/page1.js
// 放置你要重置的数据
const initState = {
  page1Data: [],
}

// state
const state = {
  // 参数解构
  ...initState,

  // 路由改变不想重置的数据
  page1Title: '',
  initState(){
    return initState
  }
}

전역 모듈 구성

전역 변이 이벤트 유형 정의

// store/types.js
export const RESET_STATES = 'resetStates'

전역 변이 정의

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

  const mState = state[moduleState];

  if (mState.initState && typeof mState.initState === 'function') {

    const initState = mState.initState();

    for (const key in initState) {

      mState[key] = initState[key];
    }
  }

}

export default {

  [types.RESET_STATES](state, payload) {

    for (const moduleState in state) {

      resetState(state, moduleState);
    }
  },

}

전역 동작 정의

// store/action.js
import * as types from './types'

export default {
  // rest state action
  resetStates:function (context, payLoad) {

    context.commit(types.RESET_STATES, payLoad);
  }
}

경로 전환 트리거 재설정 방법

이제 모든 것이 준비되었습니다. 경로가 변경되면 재설정을 트리거합니다. 이는 항목 vue 파일에서 처리됩니다

// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>

Chrome 브라우저에 vuejs-devtools가 설치되어 있으면 경로 재설정 프로세스 시 이전 경로 데이터를 명확하게 볼 수 있습니다.

요약

예를 보려면 여기를 클릭하세요. 여기서 vuex 상태 재설정은 경로가 전환될 때마다 모든 저장소의 상태를 순회하고 initState()에서 속성을 재설정하는 것입니다. 그러나 현재 경로에 해당하는 상태를 재설정할 수 있으면 더 좋을 것입니다. 매장의 라우팅과 모듈 사이. 다음은 vuex 상태를 재설정하는 솔루션입니다. 더 나은 솔루션이 있으면 메시지를 남겨주세요. 부적절한 내용이 있으면 언제든지 댓글을 남겨주세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 Ali 글꼴 아이콘을 참조하는 방법

Express에서 log4js의 실제 사용에 대해

NodeJS를 사용하여 WebSocket 기능을 구현하는 방법

위 내용은 vuex에서 유휴 상태 재설정을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!