goodsource

페이지 로드 시 돌연변이 [Nuxt] [Vuex] (vue와 nuxt는 처음입니다).현재 가지고 있는내 컴포넌트layouts/default.vue각 페이지에서 다른 이미지 URL을 해당 컴포넌트에 전달하고 싶습니다. 지금은 vuex $store를 사용하고 있습니다만(데이터를 보다 간단하게 전달할 수 있는 방법이 있으면 좋겠다고 생각합니다).pages/xyz.vue돌연변이를 사용해서this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg') 내가 찾을 수 있는 모든 예제는 사용자 이벤트에만 돌연변이를 사용합니다.당신이 하려고 하는 것은 아마도 특별히 간단한 해결책은 없을 것이고, 내가 그것을 하는 방법은 로드될 때 컴포넌트에 의해 설정된 스토어 상태 요..

모듈 및 vuex-persisted state를 사용한 Vuex 상태 유지 vue에서 인증 구현 작업을 진행 중인데 새로 고침 시 상태가 손실되어 jwt 토큰이 지워집니다.우연히 알게 되었다vuex-persistedstate모듈로 사용할 때 구문을 제대로 알 수 없는 것 같습니다.어떻게 하면 더 이상 참을 수 없을까?token그리고.status내 상태auth.js모듈? 로컬 스토리지로 이동하면 상태가 추가되는 것처럼 보이지만 페이지를 새로 고치면 지속되지 않습니다. index.displaces를 표시합니다. import Vue from 'vue'; import Vuex from 'vuex'; import * as auth from '@/store/modules/auth' import createPersi..

vuejs에서 전화(xxx-xxx-xxxxx)를 태그로 포맷하는 방법 텍스트 상자에 전화번호를 연결하면서 텍스트 상자를 포맷할 수 있도록 하고 싶습니다.질문에는 시도된 내용이나 달성 방법에 대한 정보가 많지 않기 때문에 나중에 재사용할 수 있는 공통 컴포넌트를 만들겠습니다. 표시할 숫자의 형식을 지정하는 필드의 워처 및 regexp를 사용하여 수행할 수 있는 작업 Vue.component('my-phone-input', { template: ` `, data: function() { return { phoneValue: 0, formattedPhoneValue: "0", preventNextIteration: false } }, methods: { focusOut: function(event) { if ..

VueJ를 사용하여 객체의 여러 소품을 업데이트할 때 어떻게 반응성을 유도합니까? 돔의 일부가 입력에 제대로 반응하지 않는 앱을 만드는 동안 이상한 행동을 목격했습니다.돌연변이가 등록되고 상태가 변화하고 있었지만 DOM의 소품은 그렇지 않았습니다.다시 돌아왔을 때 html의 새로운 공백 행 하나를 편집하여 새로운 소품을 표시하고 있는 것을 알 수 있었습니다.그러나 문서를 편집, 저장, 저장한 후 다시 돌아가서 상태에 대한 새로운 변경 사항을 확인해야 합니다. 그래서 상태가 업데이트되고 있었지만 Vue는 변화에 반응하지 않았습니다.그 이유는 다음과 같습니다.https://vuejs.org/v2/guide/reactivity.html#For-Objects Vue가 속성 추가 또는 삭제를 감지할 수 없습니다...

계산된 속성이 에 할당되었지만 설정자가 없습니다. 이것이 myVal에서 동작하도록 하기 위한 올바른 구문/훅은 무엇입니까? 코드는 다음과 같습니다. { return state.myVal;} '세터'가 작동하고 오류 메시지가 사라지도록 어떻게 배선해야 할지 모르겠어요. 이것도 시도해 봤지만 소용없었어요. ...mapState('myModulePath', ['myVal']) 와 함수로 계산된 단일 값을 정의해야 합니다.아마도: export default { computed : { myVal: { get() { return this.$store.getters.getMyVal; }, set(newValue) { this.$store.dispatch('setMyVal', newValue); } } }, } 계산된..

vuejs/변수 값을 사용하여 양방향 바인딩 제한 다른 변수 수정 시 변경 mapGetter를 통해 내 스토어에서 얻은 클라이언트 목록을 포함하는 'client-display' 컴포넌트가 있습니다.목록 위에 'v-for'를 사용하여 모든 항목을 'v-for-panel'로 표시하므로 클라이언트 = 패널 하나가 됩니다.이들 패널의 헤더에는 클라이언트의 소품으로 전달된 '편집-삭제' 컴포넌트가 있습니다.이 "edit-delete"는 기본적으로 payload에 대한 해당 아이콘을 클릭하면 "edit" 또는 "delete" 이벤트만 발생합니다.편집 아이콘을 클릭하면 편집 이벤트가 '클라이언트 디스플레이'에 캐치되므로 클라이언트를 '클라이언트'라는 변수에 할당할 수 있습니다(좀 헷갈리긴 하지만).이 변수를 내 대화..

vuetify는 이미지가 로딩되지 않지만 prop에는 url이 표시되어 있습니다. getphot 기능에서 로딩하기 위한 사진입니다.src는 페이스북의 URL을 가지고 있지만 vuetify는 아무것도 로드하지 않습니다. computed: { user () { return this.$store.getters.user } }, methods: { getPhoto () { return this.$store.getters.user.photoUrl } } 어떠한 에러도 발생하지 않습니다.또, 링크를 사용하면 이미지에 액세스 할 수 있습니다.디바이스에서 로그인했기 때문입니다.주의: 이 모든 것에 파이어베이스를 사용하고 있습니다.해라 대신 Vue Loader는 상대 경로를 자동으로 요구 함수로 변환합니다.유감스럽게도 ..

Vuex가 다른 어레이를 전달 필터 작성: 돌연변이 export default { state: { filteredBrands: [] }, mutations: { showFilteredList(state, payload) { state.filteredBrands.push(payload); } } }; 방법들 loadProducts(item) { axios.get('/api', { params: { per_page: 20, filter_machinery_brands: [ item ] } }) .then((response) => { this.$store.commit( 'showFilteredList', response.data ); }); }, item체크 박스가 있는 입력입니다.클릭하면, 이 카테고리에 대한..

상태 변경 시 Vuex getter가 업데이트되지 않음 상태 개체가 변경될 때 vuex getter를 업데이트할 수 없습니다.vuex getter가 축소 함수를 사용하여 상태 객체의 총 값 합계를 반환하려고 합니다. // Mutation state.shippingFees[method.sellerId] = method.fee; // state.shippingFees = { 1: 1900 }; etc. // Getter totalShippingFees: state => Object.values(state.shippingFees).reduce((total, fee) => total + fee, 0) 배송비 키-값 쌍을 주에서 설정한 후.shippingFeees 객체는 getter가 0을 반환할 뿐입니다.Vue..

Vue.js vue-router:페이지를 새로고침하지 않고 되돌아가려면 어떻게 해야 합니까? 문제의 핵심은 다음과 같습니다. 주의사항: 입력/검색 시 vuex에서 쿼리가 업데이트됨 제품 클릭 후 사용자는 다음 방법으로 이동됩니다.user.push('/product/'+ asin) 이사할 때 둘 다 해봤어요router.push('/')게다가router.go(-1) 사용자가 돌아올 때마다 쿼리 값이 손실되고 결과 목록이 새로고침됩니다. 이런 일이 일어나지 않도록 쉽게 구할 수 있는 레시피가 있나요?감사합니다. 추가 정보:보시다시피 뒤로 버튼을 누르면 가져온 제품 목록이 이전과 동일하게 잠시 표시됩니다. 그런 다음 어떤 이유로 인해 쿼리가 비워지고 결과가 지워집니다.언급URL : https://stackove..