반응형

Vuex 119

동일한 이미지에서 불필요한 http 요청 방지 - vuejs

동일한 이미지에서 불필요한 http 요청 방지 - vuejs 상황: 페이지에는 사용자 목록을 수신하는 여러 구성 요소가 있습니다.목록을 받은 후 사용자의 이미지를 가져오기 위해 추가 구성 요소를 호출하는 foreach 사이클이 있습니다.여러 구성 요소가 동일한 사용자를 포함할 수 있습니다. 즉, "반복된 이미지"를 가져오기 위해 동일한 http 요청을 반복해야 합니다.이러한 불필요한 요구를 피하기 위해 vueX 스토어에 특정 base64 이미지가 있는 사용자의 정보를 설정하여 이미지를 이미 받았는지 여부를 검증합니다. 문제:첫 번째 컴포넌트가 이미지 가져오기 및 스토어에 저장 요청을 했을 때 나머지 컴포넌트는 이미 작성되어 있기 때문에 스토어가 비어 있기 때문에 이미지가 있는지 확인할 수 없습니다. 솔루..

programing 2022.08.14

페이지를 새로 고치면 성별 정보가 사라집니다.

페이지를 새로 고치면 성별 정보가 사라집니다. 변수 이름 지정jso페이지를 새로 고치면 사라집니다.또한 매장 정보를 보내는 방법 외에 다른 방법이 있습니까?버튼을 사용하지 않고 페이지를 새로 고치고 다시 열면 작동합니다. view/user Profile.표시하다 {{userdata['username']}} {{userdata['id']}} {{userdata['email']}} {{userdata['phone_number']}} {{userdata['first_name']}} {{userdata['last_name']}} {{userdata['gender']}} {{userdata['educational_status']}} {{this.profileData.gender}} {{jso}} --> varia..

programing 2022.08.14

Vuejs의 매초 악리콜이 느리다

Vuejs의 매초 악리콜이 느리다 Vuejs 2.6.11을 Vuex 3.2.0 및 axios v0.19.2와 함께 사용하고 있으며, 이 스택오버플로우 질문에서도 보고한 다양한 고유한 문제가 있습니다.같은 액션에 대한 Vuex의 커밋은 매초 느립니다. Angular 1 앱 등에서 동일한 백엔드 엔드 포인트에 콜을 발신하고 있기 때문에 백엔드는 문제가 되지 않습니다.첫 번째 콜 후 모든 콜이 일관되게 고속입니다. 컴포넌트에서 직접 vuex를 사용하지 않고 Axios 호출도 테스트했지만 동일한 문제가 발생하였습니다. 다음은 로컬 컴포넌트의 Axios 호출입니다. async getDataLocal() { // this.showCollapse = !this.showCollapse // this.$store.dis..

programing 2022.08.13

어레이의 VueJs에서 동적 '자세히 읽기' 버튼을 긴 텍스트로 설정하는 방법

어레이의 VueJs에서 동적 '자세히 읽기' 버튼을 긴 텍스트로 설정하는 방법 나는 얼마 전에 Vue JS를 배웠다. 그리고 나는 어떤 문제를 해결하는 데 몇 가지 문제가 있다. 이 경우 특정 객체에서 긴 텍스트를 숨기고 표시하는 이벤트를 만들어야 합니다. 내 지원서의 논리는 다음과 같다. 서버에 요청을 보냅니다. 나는 답을 얻었다. 그리고 Vuex 스토어에 씁니다. 또한 컴포넌트 출력에 게터 및 루프를 사용합니다. 만약 누군가 비슷한 상황에 처했다면, 저는 어떤 도움이라도 받을 수 있으면 고맙겠습니다. 이것은 내 코드의 일부입니다. import {mapActions, mapGetters} from "vuex"; {{comment.description.slice(0, 200)}}Открыть {{comm..

programing 2022.08.13

vuex, axios에서 불필요한 요청을 모두 취소하는 방법

vuex, axios에서 불필요한 요청을 모두 취소하는 방법 문제가 있다: 페이지를 실행하면 비동기 기능이mounted훅이 계속 기능한다(예를 들어)await this.getUser({id: 1}))를 사용하려고 합니다.axios.CancelToken단, 유감스럽게도 첫 번째 요구만 취소됩니다(모든 요구는 아닙니다).요청 전송 기능: const source = axios.CancelToken.source(); const config = { headers: { authorization: `${prefix}${localStorage.getItem('authorization')}` }, cancelToken: source.token }; store.commit('SET_CANCEL_SOURCE', source..

programing 2022.08.13

스토어 내에서 액션에 액세스하거나 디스패치를 하는 방법

스토어 내에서 액션에 액세스하거나 디스패치를 하는 방법 이것은 스토어에 있는 알림 모듈입니다.스토어 자체에서 클리어 메서드를 트리거하여 몇 초 후 자동으로 알림이 트리거되면 알림을 닫도록 하겠습니다.어떻게 하면 좋을까요? export const mutations = { success(state, message, isModal) { state.type = 'success'; state.message = message; state.show = true; state.isModalMsg = isModal; setTimeout(()=>{ actions.clear(state); },3000); }, error(state, message, isModal) { state.type = 'danger'; state.mes..

programing 2022.08.13

O(1)의 reducx/vuex 저장소의 요소를 업데이트하려면 어떻게 해야 합니까?

O(1)의 reducx/vuex 저장소의 요소를 업데이트하려면 어떻게 해야 합니까? O(1)의 스토어(redux, vuex)에 있는 목록의 요소(해시)는 보통 어떻게 업데이트합니까? 요소의 순서가 필요합니다.중요합니다(목록에서 요소를 추가하거나 삭제할 수 있습니다.밀리초마다 요소를 업데이트하기 때문에 많은 업데이트가 이루어집니다. 내 질문은, 요소의 인덱스를 요소의 속성으로 저장하는 것은 매우 나쁘다는 것이다.목록에 500~1000개의 요소가 있는 경우.find예를 들어 ID로요?두 가지 속성으로 스토어 모양 정규화 엔티티에 대한 ID 맵 필요한 순서대로 ID 목록입니다. { byId : { "post1" : { id : "post1", author : "user1", body : "......", co..

programing 2022.08.11

호출하지 않고 실행 중인 계산 함수

호출하지 않고 실행 중인 계산 함수 계산된 함수를 통해 데이터 속성에 어레이를 설정하고 있으며, 정상적으로 작동합니다.근데 어디에도 전화하지 않으면 어떻게 가능하죠?console.log를 기능에서 추가하려고 해도 아무것도 인쇄되지 않지만 데이터는 여전히 설정되어 있습니다.어떻게 할 수 있을까요? 데이터: data() { return { projects: [] }; }, 계산 결과: computed: { loadedProjects() { console.log("Hello there") this.projects = this.$store.getters.loadedProjects } }, 전화를 걸지 않고 console.log를 인쇄하여 데이터를 설정하기 전에 실행 중인지(이유를 알 수 없음)에 따라 실행이 되..

programing 2022.08.11

Vue3에서 어레이 타입의 프로펠러 재렌더링 회피

Vue3에서 어레이 타입의 프로펠러 재렌더링 회피 나는 이것을 근본적인 질문이라고 생각한다.vue2/vue3 반응성의 원리에 관한 것입니다. 태그가 있는 항목(다대다)이 있다고 가정합니다.다음과 같이 vuex에 저장됩니다(normalizr 접근법 사용). export const state = () => ({ itemsOrder: [1, 2, ...], itemsByIds: { 1: { id: 1, title: 'Item 1' }, 2: { id: 2, title: 'Item 2' } ... }, tagsByIds: { 1: { id: 1, title: 'Tag 1' }, 2: { id: 2, title: 'Tag 2'}, ... }, itemTags: [{ itemId: 1, tagId: 1 }, .....

programing 2022.08.11

Vuex를 사용하여 사용자를 로그인 상태로 유지하는 방법

Vuex를 사용하여 사용자를 로그인 상태로 유지하는 방법 및 .Vuex 의입니다. 사용자가 양식에 로그인 세부 정보를 제출합니다. 폼은 이폼을 합니다.Vuex을 만드는 행위axios 엔드포인트에 콜 "/Express " API "/api/login 됩니다.이 데이터는 에 저장되어 있습니다.state.usersetUser「」의 플래그.state.user.isLoggedIn로도 설정되어 있습니다.true. JWT 액세스 토큰은 사용자의 브라우저로 전송되고 보안 쿠키에 저장되며 만료될 때까지 계속 사용할 수 있습니다.기한이 만료되면 새로 고침 토큰을 사용하여 새 JWT 액세스 토큰을 생성합니다. 사이트 헤더에는 사용자의 로그인 정보가 표시됩니다.예: name 이상이 모두 예상대로 동작합니다. 고친 , " ",..

programing 2022.08.10
반응형