반응형

Vuex 11

Nux JS에서 Vuex 모듈 모드를 올바르게 사용하는 방법은 무엇입니까?

Nux JS에서 Vuex 모듈 모드를 올바르게 사용하는 방법은 무엇입니까? 안녕하세요 저는 Nuxt JS의 초보 사용자입니다.Nux 프로젝트에 Vuex 모듈 모드를 사용하려고 합니다. 기본적으로 저는 VueX 모듈 안에서 공리를 사용하고 있습니다.아래 내 코드: store/message/users.j import axios from 'axios'; const state = () => ({ users: [] }); // Sets the values of data in states const mutations = { setUsers(state, users) { state.users = users; } }; const actions = { nuxtServerInit(vuexContext, context) { ..

programing 2023.07.17

just unit testing을 위해 Vuex 액션을 수정할 수 있습니까?

just unit testing을 위해 Vuex 액션을 수정할 수 있습니까? 테스트 파일에 스토어를 만들었습니다. import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import Actions from '../../../src/components/Actions' const localVue = createLocalVue() localVue.use(Vuex) describe('Actions.vue', () => { let actions let store beforeEach(() => { actions = { actionClick: jest.fn(() => Promise.resolve({})) } store..

programing 2023.07.07

Vue.js / Vuex + axios가 여러 PUT 요청을 전송함

Vue.js / Vuex + axios가 여러 PUT 요청을 전송함 SPA의 사용자는 그룹을 추가/업데이트 및 삭제할 수 있습니다. 저는 Vuex 스토어와 API 도우미 모듈을 설정했습니다.EditGroup 구성 요소에서 사용자가 "변경 사항 저장"을 누르면 메서드가 실행됩니다. 문제는 axios가 5~20개의 PUT 요청을 전송하지만 메서드는 한 번만 실행된다는 것입니다.GET, POST 또는 DELETE 요청 공리는 하나의 요청을 보냅니다. 내 EditGroup 구성 요소: saveSelected : function () { this.$store.dispatch(ACTION_PUT_GROUP, { data : this.selected }); }, 내 Vuex 스토어에서: [actionTypes.ACT..

programing 2023.07.02

Vue-test-utils:VueX에서 작업이 반환되는 것을 조롱하려면 어떻게 해야 합니까?

Vue-test-utils:VueX에서 작업이 반환되는 것을 조롱하려면 어떻게 해야 합니까? 저는 모듈 스토어에 파견하여 작업을 수행하고 그 결과를 사용하는 Vue 구성 요소에 대한 테스트를 작성하고 있습니다. 이 동작은 API에 대한 호출을 수행하므로 해당 동작으로 테스트를 실행하지 않고 대신 모의 실행하여 일부 더미 데이터를 반환하여 나머지 메서드 흐름이 작동하는지 확인합니다. 따라서 테스트에서 구성 요소 메서드 getData()가 작업의 응답을 데이터에 설정하는지 확인하기 위해 하드 코딩된 데이터만 반환하는 모의 작업을 사용하여 모의 저장소를 추가합니다. 하지만 이것은 효과가 없는 것처럼 보이고 대신 실제 행동이 요구되는 것처럼 보입니다.실제 작업을 호출하지 않고 테스트에 사용할 수 있도록 설정하려..

programing 2023.06.27

Vue 구성 요소가 두 번 파괴됨

Vue 구성 요소가 두 번 파괴됨 로그아웃 시 구성 요소의 수명 주기 제거 후크가 호출됩니다.방금 로그아웃한 동일한 브라우저 세션에서 로그인하면 새 인스턴스가 생성/마운트되기 전에 동일한 구성 요소가 다시 삭제됩니다.이는 해당 구성 요소에서 사용 중인 라이브러리에 문제가 있기 때문입니다. 예: 첫 번째 로그인: Component Created ID1 Component Mounted ID1 Then logout: Component Before Destroy ID1 Component Destroyed ID1 So everything so far is correct. Now log back in as a different user: Component Created ID1 Component Mounted ID1..

programing 2023.06.27

변환에 대한 페이로드로 동적 경로를 사용하여 Vuex 저장소에서 항목을 삭제하는 방법은 무엇입니까?

변환에 대한 페이로드로 동적 경로를 사용하여 Vuex 저장소에서 항목을 삭제하는 방법은 무엇입니까? vuex 상태에 대한 변환을 만들고 싶지만 동적으로 상태를 업데이트합니다. 페이로드에 요소를 삭제할 개체의 경로와 키가 포함되도록 합니다. 작업 디스패치 deleteOption(path, key) { this.$store.dispatch('deleteOptionAction', {path, key}) } 돌연변이 유발 deleteOptionAction ({ commit }, payload) { commit('deleteOption', payload) } 변환은 경로가 = 'state.xmlValues'인 페이로드를 수신합니다.[0] 데이터를 제공합니다.Pars' 및 키 = 0 deleteOption (sta..

programing 2023.06.27

Vuejs/Vuex에서 반응성(기본값) 속성을 만드는 올바른 방법은 무엇입니까?

Vuejs/Vuex에서 반응성(기본값) 속성을 만드는 올바른 방법은 무엇입니까? 나는 객체의 기본 속성을 만드는 것과 그것들을 '반응적'으로 유지하는 것 사이의 올바른 균형을 찾기 위해 고군분투하고 있습니다.중요한 참고: 저는 Vuex를 제 가게에 사용하고 있습니다. 이미 확인했습니다: https://v2.vuejs.org/v2/guide/reactivity.html 하지만 이것은 제 질문에 완전히 답하지는 않는 것 같습니다. 내 문제의 좋은 예를 들자면, 제 '스토어'에는 연락처가 포함된 제품(json)이 있습니다.응용프로그램 내부에서 새 연락처가 제품에 추가됩니다.이에 대한 조치가 있습니다. const actions = { addContact: ({ commit }, payload) => { comm..

programing 2023.06.27

Vuex - 5초마다 대용량 데이터 청크 폴링 시 메모리 누수/JS 힙 크기

Vuex - 5초마다 대용량 데이터 청크 폴링 시 메모리 누수/JS 힙 크기 스토어 관리에 Vuex를 사용하는 Vue 애플리케이션이 있습니다.루트에는 여러 개의 저장소 모듈이 있으며, 5초마다 큰 데이터 덩어리를 가져와서 저장소 돌연변이의 도움을 받아 저장소 상태로 밀어넣습니다.문제는 상태가 변형될 때마다 힙 크기가 증가한다는 것입니다.브라우저의 메모리가 부족해질 때까지 계속 증가합니다. 제 가게는 아래와 같습니다. const store = new Vuex.Store({ modules: { moduleA, moduleB } }) SPA에서 전체 페이지를 다시 로드할 때까지 전체 페이지 상태(DOM 및 Javascript/Vuex 데이터 포함)는 메모리에 남아 있습니다(vue-router를 사용하는 경우에..

programing 2023.06.17

vuex에서 약속을 중첩하는 이유는 무엇입니까?

vuex에서 약속을 중첩하는 이유는 무엇입니까? 나는 유지합니다.vue나의 전 프로그래머의 코드. 나는 그의 코드에서 이 코드를 찾았습니다.vuex모듈. import axios from "axios"; import qs from "qs"; import httpi from "../httpInstance"; // this is just a wrapper for axios const getPromise = (context, url) => { return new Promise((resolve, reject) => { httpi.get(url).then( (response) => { resolve(response); }, (error) => { reject(error); } ); }); }; // same rep..

programing 2023.06.17

이 약속이 발신자에게 다시 해결되지 않는 이유는 무엇입니까?

이 약속이 발신자에게 다시 해결되지 않는 이유는 무엇입니까? Vue-App은 Vuex 및 Axios와 함께 실행됩니다.이 앱에는 API 호출을 처리하는 vuex-store가 있지만, 스토어 액션을 호출할 때 호출자의 응답을 체인으로 연결할 수 없다는 것이 문제입니다.내가 뭘 잘못했는지 알아요? 호출 코드: import { FETCH_PRODUCTS, ADD_PRODUCT } from './actions.type' methods: { sendNewProduct () { this.$store .dispatch(ADD_PRODUCT, this.newProductForm) .then(() => { console.log('This never gets called') }) } } Vuex 스토어: const act..

programing 2023.06.12
반응형