factcode

Vuex 대신 Apollo & GraphQL 캐싱을 사용하시겠습니까? 저는 아폴로 & 그래프QL로 실험하고 있습니다.Vuex를 요구하는 대신 캐쉬를 활용할 수 있다는 것을 읽었습니다. 하지만 두 가지를 결합하는 일종의 안티 패턴을 만들지 않고는 어떻게 해야 할지 고민할 수 없습니다. 그들이 이 상황에 어떻게 접근했는지에 대한 예를 가진 사람이 있습니까? 제가 시도하고 있는 것은: Vue Apollo의 CLI 설치 사용: vue add apollo ./vue-apollo.js에서 구성을 설정한 후 공급자 및 기본 옵션에 내보내기를 추가했습니다. export const defaultOptions = { // ...all the default settings } export function createProv..

Laravel 경로를 vue 구성 요소로 전달 나는 있습니다.index.blade.php이 뷰에 값 코드를 포함했습니다.정상적인 상황에서 우리는 다음과 같이 라벨 경로를 통과할 수 있습니다. Link 이 안에 마스터 뷰 구성 요소가 있다고 상상해 보십시오.index.blade.php그리고 지금 이 일을 하고 있습니다. @section('body')

돌연변이 및 동작을 통한 Vuex 빅 어레이 처리 저는 약 1k의 배열을 가지고 있습니다.10k 요소를 처리해야 합니다.어레이가 Vuex 상태로 저장되고 있습니다.사용자는 단일 요소 또는 모든 요소를 처리할 수 있어야 합니다.처음에는 어레이가 상당히 작았을 때 단일 요소 처리를 위해 변환을 사용하고 모든 요소 처리를 위해 동작을 사용했습니다.그래서 코드는 다음과 같았습니다. new Vuex.Store({ state: { array: [el1, el2, el3...] }, mutations: { processEl: (state, el) => { ... } }, actions: { processAll: context => { context.state.array.forEach(el => context.comm..

변환 상태가 업데이트되지 않음 변환을 커밋했지만 사용자 상태가 업데이트되지 않고 null을 반환합니다. 변환된 데이터를 수신합니다. xios 호출이 사용자를 반환하지만 상태를 업데이트하지 않습니다. export default new Vuex.Store({ state: { user: null }, getters: { getUser: state => { return state.user; } }, mutations: { setUser(state, user) { let url = domain + "user"; axios .get(url, { params: { uuid: user.uid } }) .then(res => { Vue.set(state, user, res.data) // tried state.user ..

Vue.js, Vuex, Vue-Router SPA 및 애플리케이션 클라이언트 측과 서버 측 간의 확장 아주, 아주, 아주, 크고 복잡한 애플리케이션을 다시 쓰고 있어요. Vue/Vuex/Vue 라우터를 사용하고 있다 이것은, 데스크탑과 같은 퍼시스턴트한 UI 를 갖춘 1 페이지 애플리케이션입니다. 그것은 150개가 넘는 '형태'를 가지고 있으며, 이는 약 그 많은 물체에 해당한다. 정기적으로 새로운 양식을 추가해야 합니다. 각 폼을 모달로 표시한다고 가정합니다(그렇지 않지만 상상하기 쉽습니다). 앱은 이미 15MB 정도 됩니다. 이러한 폼에 대해서, 서버상에서 렌더링 해 모달에 로드하는 것과 애플리케이션에 컴포넌트를 포함시켜 클라이언트와 서버의 책임을 분리하는 것 중 어느 것을 고려해야 합니까? 즉, ..

상태를 업데이트하지 않는 Vuex 변환 컴포넌트 간의 상태 관리를 위해 Vuex를 사용하는 Vuejs 어플리케이션 작업.Vuex 스토어에서는 API에서 일부 데이터를 가져온 후(정상적으로 작동) 변환하여 해당 상태를 채우는 작업이 있습니다.다음으로 getters를 사용하여 업데이트된 상태를 컴포넌트에 전달합니다. 문제는 액션에서 상태로 데이터를 채우는 데 문제가 있다는 것입니다.DOM에서 계산된 속성을 통해 가져오거나 getter를 사용하여 가져오려고 시도했지만 빈 문자열을 얻습니다. Vuex 스토어 const getDefaultState = () => { return { clientDeposit: '' } } //state const state = getDefaultState(); //getters c..

vuex에서 편집 가능한 복잡한 개체(네스트됨)를 적절하게 처리하는 방법 Vuex는 복잡한 데이터를 표시하고 복잡한 돌연변이를 하는 것은 매우 좋지만(스토어 전체에 영향을 미치는 트리에 노드를 추가하는 등) 복잡한 객체에 대한 "단순한" 돌연변이를 처리하는 것은 매우 귀찮은 일입니다. 제가 직면한 한 가지 사용 사례는 (매우) 단순합니다.내스트된 속성 및 어레이가 있는 목록 개체를 표시하는 컴포넌트가 있습니다.각 속성은 편집할 수 있습니다.각 개체는 하위 구성 요소와 함께 표시됩니다(리프 속성에 v-model을 사용해야 함). 다른 사용 사례는 구성 요소의 메서드를 사용하여 여는 모달 대화 상자입니다. 이 대화 상자에서 개체의 일부 속성/네스트 속성을 편집할 수 있습니다(리프 속성에 v-model을 사용..

Jest vue-multicelect에서 vuex 작업을 테스트할 때 모의 함수가 호출되어야 합니다. 구성 요소의 v-model에서 디스패치 작업을 테스트하는 데 문제가 있습니다.멀티셀렉트가 있는데 값이 변경될 때마다 디스패치액션이 실행됩니다.선택한 값은 na Vuex 스토어에 저장되어 있기 때문입니다.멀티 셀렉트로 값이 선택된 후 디스패치 액션이 호출되었는지 테스트하고 싶습니다. computed: { subdivision: { set(value) { this.$store.dispatch("subdivision", value); }, get(value) { return this.$store.state.subdivision; } } } 이것이 테스트입니다. describe('Value change of s..

vuex에서 마운트된 함수의 저장소 데이터에 액세스하는 방법 1개의 루트 컴포넌트를 사용하고 있습니다.App.vue기타 컴포넌트는 다음과 같습니다.FileUploaderParent.vue·데이터를 스토어에 저장하겠다는 디스패치 약속으로 전화드렸습니다.마운트된 라이프 사이클 훅으로 디스패치를 호출합니다. 한편, 다른 컴포넌트에 탑재된 기능으로 저장된 사용자 데이터에 액세스하려고 합니다.정의되지 않은 오류를 보여줍니다. 네, 마운트된 함수에 대해 동일한 디스패치 약속을 호출하는 작업이 가능합니다.하지만 해킹처럼 느껴지고 디스패치 콜도 점점 중복되고 있습니다. 여기 코드가 있습니다.App.vue: MeshApp 여기 코드가 있습니다.FileUploaderParent.vue: {{this.defaultAvata..

리스트 렌더링에서의 Vuex 및 반응성 그래서 간단한 가게가 있습니다. const state = { cart: [] }; 카트에 아이템이 있을 때의 모습은 다음과 같습니다. [ { id: 1, name: 'My first product', price: 3, quantity: 3 }, { id: 2, name: 'My second product', price: 2, quantity: 7 } ] 이 오브젝트에 대한 변환은 다음과 같습니다. ADDPRODUCTTOCART (state,product,quantity) { for(var i = 0; i < state.cart.length; i++) { if(state.cart[i].id === product.id) { state.cart[i].quantity +=..