"[vuex] 상태 필드 foo가 foobar에서 같은 이름의 모듈에 의해 오버라이드되었습니다." 딥머지 도우미 함수가 농담으로 사용됩니다.

"[vuex] 상태 필드 foo가 foobar에서 같은 이름의 모듈에 의해 오버라이드되었습니다." 딥머지 도우미 함수가 농담으로 사용됩니다.

저는 도우미 기능을 사용하여 농담에 스토어를 만들고 있습니다.도우미 함수는 딥 머지를 사용하여 기본 Configuration과 맞춤 Configuration을 Marge합니다.이로 인해 여러 콘솔 경고가 발생합니다.

[vuex] state field "cart" was overridden by a module with the same name at "cart"
[vuex] state field "customer" was overridden by a module with the same name at "customer"
[vuex] state field "checkout" was overridden by a module with the same name at "checkout"

store.js(프레젠테이션용으로 최소한으로 축소)

import cart from './modules/cart'
import checkout from './modules/checkout'
import customer from './modules/customer'

Vue.use(Vuex)

export const config = {
    modules: {
        cart,
        customer,
        checkout,
    },
}

export default new Vuex.Store(config)

test-syslogs.displaces.displaces

import merge from 'deepmerge'
import { config as storeConfig } from './vuex/store'

// merge basic config with custom config
export const createStore = config => {
    const combinedConfig = (config)
        ? merge(storeConfig, config)
        : storeConfig
    return new Vuex.Store(combinedConfig)
}

내부의 도우미 기능을 이용하는 것

somejest.test.displaces 를 참조해 주세요.

import { createStore } from 'test-utils'

const wrapper = mount(ShippingComponent, {
    store: createStore({
        modules: {
            checkout: {
                state: {
                    availableShippingMethods: {
                        flatrate: {
                            carrier_title: 'Flat Rate',
                        },
                    },
                },
            },
        },
    }),
    localVue,
})

콘솔 경고를 해결하려면 어떻게 해야 합니까?

이 경우 경고는 다소 오해의 소지가 있다고 생각합니다.그것은 기술적으로 사실이다. 다만 도움이 되지 않을 뿐이다.

다음 코드에서도 동일한 경고가 발생합니다. 않다deepmerge,vue-test-utils ★★★★★★★★★★★★★★★★★」jest하지만 근본 원인은 원래 질문에서와 같다고 생각합니다.

const config = {
  state: {},

  modules: {
    customer: {}
  }
}

const store1 = new Vuex.Store(config)
const store2 = new Vuex.Store(config)

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>

이 예에서는 경고를 트리거하기 위해 다음 두 가지 중요한 부분이 있습니다.

1. 여러 점포
2. state오브젝트를 지정합니다.

질문의 코드는 분명히 여러 개의 스토어를 가지고 있습니다.하나는 의 끝에 생성됩니다.store.js그리고 다른 하나는createStore.

않는다state오브젝트입니다만, 코드가 축소된 것을 나타내고 있습니다.완전한 코드에는 이 오브젝트가 있을 겁니다.

그럼 왜 이게 경고를 촉발하는 거죠?

듈state는 루트 안에 됩니다.state에는 명시적으로 없습니다만, 라고 되어 있습니다.state아직 존재합니다. ★★★★★★★★★★★★★★★★★.state will will will will will will will 에 저장됩니다.state.customer 첫 되면 "이러한 스토어"가 customer 루트에 state★★★★★★ 。

아직까지는 문제 없습니다.

두 가 생성될 루트인 루트를 합니다.state이 해도 복사된 Marge가 있기 때문에 이 되지 .복사된 것은state,도.customer 도 같이 넣으려고 요.customerstate그러나 속성이 이미 존재함을 발견하고 혼동하여 경고를 기록합니다.

공식 문서에는 이에 대한 몇 가지 내용이 포함되어 있습니다.

https://vuex.vuejs.org/guide/modules.html#module-reuse

입니다.state★★★★

state: () => ({ /* all the state you currently have */ }),

각 상점은 이 함수를 호출하고 해당 상태의 복사본을 가져옵니다.data컴포넌트의 기능.

실제로 루트가 필요 없다면state다 떼는 것만으로 고칠 수 있어요.없는 경우state지정된 경우 Vuex는 새 루트를 만듭니다.state오브젝트를 지정합니다.

다음과 같이 상태 내의 속성 이름이 모듈 이름과 충돌할 때 기록됩니다.

new Vuex.Store({
  state: {
    foo: 'bar'
  },
  modules: {
    foo: {}
  }
})

따라서 경고가 발생합니다.

new Vuex.Store(({
  state: {
    cart: '',
    customer: '',
    checkout: ''
  },
  modules: {
    cart: {},
    customer: {},
    checkout: {},
  }
}))

---

여기서 가장 가능성이 높다

export const createStore = config => {
    const combinedConfig = (config)
        ? merge(storeConfig, config)
        : storeConfig
    return new Vuex.Store(combinedConfig)
}

vuex의 소스 코드에서 로깅을 위해 이러한 오류가 발생하는 위치를 나타내는 데 도움이 됩니다.

실제 가동 중인 앱을 실행하면 이 경고가 발생하지 않는다는 것을 알고 있습니다.또는 잠재적으로 경고를 가로채고 즉시 돌아올 수 있습니다.

vuex 소스 코드

const parentState = getNestedState(rootState, path.slice(0, -1))
const moduleName = path[path.length - 1]
store._withCommit(() => {
  if (__DEV__) {
    if (moduleName in parentState) {
      console.warn(
        `[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"`
      )
    }
  }
  Vue.set(parentState, moduleName, module.state)
})

vuex 테스트

jest.spyOn(console, 'warn').mockImplementation()
const store = new Vuex.Store({
  modules: {
    foo: {
      state () {
        return { value: 1 }
      },
      modules: {
        value: {
          state: () => 2
        }
      }
    }
  }
})
expect(store.state.foo.value).toBe(2)
expect(console.warn).toHaveBeenCalledWith(
  `[vuex] state field "value" was overridden by a module with the same name at "foo.value"`
)

음, 나는 그것을 사용할 필요가 없다고 생각한다.deepmergetest-s.ts.로 표시됩니다.모듈을 다른 방법과 병합하는 대신 Vuex 자체를 사용하여 병합하는 것이 좋습니다.

모의모듈에서 Jest를 사용한 Vuex 테스트 매뉴얼을 참조할 수 있습니다.

필요한 모듈을 통과해야 합니다.

import { createStore, createLocalVue } from 'test-utils';
import Vuex from 'vuex';

const localVue = createLocalVue()

localVue.use(Vuex);

// mock the store in beforeEach

describe('MyComponent.vue', () => {
  let actions
  let state
  let store

  beforeEach(() => {
    state = {
      availableShippingMethods: {
        flatrate: {
          carrier_title: 'Flat Rate',
        },
      },
    }

    actions = {
      moduleActionClick: jest.fn()
    }

    store = new Vuex.Store({
      modules: {
        checkout: {
          state,
          actions,
          getters: myModule.getters // you can get your getters from store. No need to mock those 
        }
      }
    })
  })
});

휘파람, 테스트 케이스:

const wrapper = shallowMount(MyComponent, { store, localVue })

이게 도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/61653044/vuex-state-field-foo-was-overridden-by-a-module-with-the-same-name-at-foobar