vuex- 상태가 함수 또는 개체 리터럴로 반환됨

vuex- 상태가 함수 또는 개체 리터럴로 반환됨

얼마 전 어떤 문제에 부딪혀 큰 스택 커뮤니티에 해결책을 요청했습니다.

문제:

같은 모듈을 다른 모듈에 네스트했는데 상태를 정의하는 방법은 다음과 같습니다.

state: {
  // some state here
}

서로 다른 모듈 아래에 중첩되어 있는 것처럼 보여도 모든 모듈이 동일한 상태를 공유했습니다.

해결 방법

state() {
  return {
    // state here instead
  }
}

해결책은 함수를 개체 리터럴로 정의하는 것이 아니라 함수 반환 상태를 갖는 것입니다.그 이유는 어느 정도 일리가 있다.질문 드리겠습니다.

새로운 질문

1. 상태가 오브젝트 리터럴과 오브젝트 리터럴을 반환하는 함수로 정의되면 스토어 후드 아래에서 어떤 일이 발생합니까?

2. 함수 버전을 사용하지 않는 이유는 무엇입니까?쉽게 말하면 기본 선택처럼 보이지만 의 vuex 문서에서도 오브젝트 리터럴로서 상태를 표시하는 것을 선택합니다.

tl;dr 함수를 사용하는 이유는 모듈 재사용입니다.

---

상태가 오브젝트 리터럴과 오브젝트 리터럴을 반환하는 함수로 정의되면 스토어 후드 아래에서 어떤 일이 발생합니까?

그러기 위해서는 후드 밑을 확인하는 것이 좋습니다.

var Store = function Store (options) {
  // ...
  var state = options.state; if ( state === void 0 ) state = {};
  if (typeof state === 'function') {
    state = state() || {};
  }

위의 코드는 보다시피state제공되었습니다.그렇지 않으면 빈 오브젝트가 할당됩니다( ).{})의 선두에 있습니다.state.

다음으로, 그것은 체크한다.state였다function이 경우 실행되어 에 할당됩니다.state뭘 돌려줬는지.반환된 경우undefined(또는 임의의 거짓 값)에 할당한다.state비어 있는 물체{}.

그게 바로 서비스 제공의 차이점입니다.state오브젝트 또는 함수로 지정: 지정한 경우 실행됩니다.개체가 제공된 경우 개체가 직접 할당됩니다.

함수 버전을 사용하지 않는 이유는 무엇입니까?이는 쉽게 기본 선택처럼 보이지만 모듈용 vuex 문서에서도 개체 리터럴로 상태를 표시하는 것을 선택합니다.

일반적으로 오브젝트 버전이 더 일반적일 수 있습니다.일반적으로 선언하는 것은store오브젝트(및 그)stateVue 인스턴스에서 한 번만 사용합니다.

의 사용 예state기능 otoh는 모듈 재사용:

모듈 재사용

예를 들어 다음과 같이 모듈의 여러 인스턴스를 작성해야 할 수 있습니다.

• 동일한 모듈을 사용하는 여러 스토어 작성(예를 들어 runInNewContext 옵션이 false이거나 '1회'일 때 SSR에서 상태 저장 싱글톤을 사용하지 않도록 하기 위해)
• 동일한 모듈을 동일한 스토어에 여러 번 등록합니다.

Vuex 모듈을 단 한 번만 선언하고 다른 네임스페이스에서 여러 번 사용하려고 하면 다른 경우가 발생할 수 있습니다.

위의 예시와 마찬가지로 문제를 설명하기 위한 데모(모듈 케이스)를 다음에 나타냅니다.

const personModule = {
  namespaced: true,
  state: {name: "name"},
  mutations: {
  	changeName(state, data) { state.name = data }
  }
}
const myStore = new Vuex.Store({
  strict: true,
  modules: {
    aliceNamespace: personModule,
    bobNamespcace: personModule
  }
});
new Vue({
  store: myStore,
  el: '#app',
  mounted() {
    this.changeAlicesName("Alice");
    this.changeBobsName("Bob");
  },
  computed: {
    ...Vuex.mapState('aliceNamespace', {alicesName: 'name'}),
    ...Vuex.mapState('bobNamespcace', {bobsName: 'name'})
  },
  methods: {
    ...Vuex.mapMutations('aliceNamespace', {changeAlicesName: 'changeName'}),
    ...Vuex.mapMutations('bobNamespcace', {changeBobsName: 'changeName'})
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>Alice's name: {{ alicesName }}</p>
  <hr>
  <p>Bob's name: {{ bobsName }}</p>
  <hr>
  <button @click="changeAlicesName('Eve')">Change Alice's Name</button>
</div>

상태를 할 때 가 '아니다'로 됩니다.state두 모듈 모두.그 결과 모듈을 편집하면 다른 모듈이 영향을 받습니다.실제로는 2개의 다른 모듈일 수 있지만, 1개의 오브젝트에 불과합니다.

ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ)을state함수로서 모듈 선언을 원하는 횟수만큼 자유롭게 재사용할 수 있습니다.

const personModule = {
  namespaced: true,
  state() {                     // changed to a function
    return {name: "name"}       // changed to a function
  },                            // changed to a function
  mutations: {
  	changeName(state, data) { state.name = data }
  }
}
const myStore = new Vuex.Store({
  strict: true,
  modules: {
    aliceNamespace: personModule,
    bobNamespcace: personModule
  }
});
new Vue({
  store: myStore,
  el: '#app',
  mounted() {
    this.changeAlicesName("Alice");
    this.changeBobsName("Bob");
  },
  computed: {
    ...Vuex.mapState('aliceNamespace', {alicesName: 'name'}),
    ...Vuex.mapState('bobNamespcace', {bobsName: 'name'})
  },
  methods: {
    ...Vuex.mapMutations('aliceNamespace', {changeAlicesName: 'changeName'}),
    ...Vuex.mapMutations('bobNamespcace', {changeBobsName: 'changeName'})
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>Alice's name: {{ alicesName }}</p>
  <hr>
  <p>Bob's name: {{ bobsName }}</p>
  <hr>
  <button @click="changeAlicesName('Eve')">Change Alice's Name</button>
</div>

★★★★★★★★★★★★★★★★★★state가 되면 함수가 됩니다. 다른 기능을 생성합니다.state모든 모듈의 인스턴스가 예상대로 작동합니다.

언급URL : https://stackoverflow.com/questions/49557177/vuex-state-returned-as-function-or-object-literal