Vuex의 상태 초기화 코드를 어디에 넣어야 합니까?

Vuex의 상태 초기화 코드를 어디에 넣어야 합니까?

Vuex는 상태 구조와 상태(변환, 액션)를 변경하는 방법 또는 실제 상태 초기화 및 값만 저장해야 합니까?

상태 초기화 코드가 복잡해졌을 때 Vuex 아키텍처에 이 코드를 넣을 수 있는 자연스러운 장소가 없기 때문에 고민하기 시작했습니다.

예를 들어 다음과 같은 스토어가 있다고 가정해 보겠습니다.

export default {
  state: {
    list: []
  },

  mutations: {
    addItem(state, { item }) {
      state.list.push(item);
    }
  }
}

목록이 비어 있으면 그걸로 충분합니다.그러나 목록에 대한 기본값이 있고 목록을 LocalStorage에 저장하여 페이지 로드 간 값을 유지하려면 어떻게 해야 합니까?

const STORAGE_LIST_KEY = 'list';

const LIST_DEFAULT = [
  {
    id: 1,
    name: 'item 1'
  },
  {
    id: 33,
    name: 'item 33'
  }
];

function initializeList() {
  let savedList = localStorage.getItem(STORAGE_LIST_KEY);
  return savedList ? savedList : LIST_DEFAULT;
];

Vuex 스토어 아키텍처에 자연스런 장소가 있나요?initializeList()기능하고 있습니까?(예: Vue 컴포넌트에서는initializeList()안으로methods컴포넌트의 일부) 또는 스토어는 구조에 관한 것이며 초기화 코드는 Vue 컴포넌트에 속해 있을 수 있습니다.

초기화 상태는 비동기 및 부작용의 필요에 따라 일종의 변환 또는 액션입니다.이 액션은 초기화 중에 한 번만 실행해야 합니다.

이 변환/액션은 루트 인스턴스 또는 충분히 높은 수준의 컴포넌트에서 트리거됩니다.전체 애플리케이션 상태의 초기화를 더 작은 돌연변이 또는 작업으로 분할할 수도 있습니다.

이 방법의 장점은 Vuex 저장소를 분할하여 Vuex 모듈을 동적으로 로드할 수 있다는 것입니다(느긋한 로드).

이 경우 로컬 스토리지에서 상태를 팽창/감소(부작용)하고 싶기 때문에 조치를 취하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/50985601/where-should-i-put-state-initialization-code-in-vuex