vuex 83

Lodash.remove를 사용하여 Vuex 변환을 통해 상태가 변경되어도 Vue 구성 요소에서 비활성 재렌더가 트리거되지 않음

Lodash.remove를 사용하여 Vuex 변환을 통해 상태가 변경되어도 Vue 구성 요소에서 비활성 재렌더가 트리거되지 않음 컴포넌트에서는 다음 컴포넌트의 배열을 수신하고 있습니다.Villager에의prop부모 컴포넌트로부터.상위 컴포넌트는 이 어레이를 다음 위치에서 가져옵니다.this.$store.state. return this.$store.state.villages.find(value => value.id === 0).villagers 실행하다this.$store.mutation나중에 지정된 배열을 변경하도록 커밋합니다.이 변환은 아래 스크린샷에서 볼 수 있듯이 동작합니다.그러나 제가 있는 컴포넌트는 재렌더링이 되지 않고 2개의 아이템이 아닌 3개의 아이템이 표시되어 있습니다. 반응성 체인이 어..

programing 2022.08.19

Nuxt JS 플러그인은 한 번만 실행할 수 있습니까?

Nuxt JS 플러그인은 한 번만 실행할 수 있습니까? 몇 가지 VueX 액션(서버에서만 실행)이 있어 다음에서 디스패치됩니다.nuxtServerInit외부 서비스에 HTTP 요구를 하면 TTFB가 느려집니다. Redis에서 값을 저장 및 검색할 수 있는 캐시 플러그인을 구현하고 싶습니다.그 목적은 모든 요구에 대한 액션에서 HTTP 요구가 발생하는 것을 방지하는 것입니다. 처음에 nuxt.js 설정 파일에 행을 추가했습니다. { src: '~/plugins/cache', ssr: true, mode: 'server' }, 그 후, 다음과 같이 작성했습니다.resources/plugins/cache.js import redis from 'redis'; export default ({ app }, inje..

programing 2022.08.19

Vue 2 및 Vuex에서 전달된 프로펠러를 변수로 사용하여 오브젝트 속성에 동적으로 액세스하면 오류가 반환된다.

Vue 2 및 Vuex에서 전달된 프로펠러를 변수로 사용하여 오브젝트 속성에 동적으로 액세스하면 오류가 반환된다. 이 문제를 해결하기 위해 이미 몇 시간 동안 시도했지만 그렇게 할 수가 없어요.다음 두 가지 질문을 확인했지만 도움이 되지 않았습니다. 변수를 사용하여 객체 속성에 동적으로 액세스 변수를 사용하여 객체 속성에 동적으로 액세스 "javascript 컴파일러는 문자열 이름을 바꾸지 않지만 오브젝트 속성 이름을 바꾸므로 여기서 오류가 발생합니다."라는 @chacham15의 답변만 있을 수 있습니다. 그렇다면 어떻게 해결하면 좋을까요? 제 목표는 이 시스템에 접속하는 것입니다.this.$store.state.countries.spain.name스페인, 독일 등에 액세스 할 수 있도록 동적으로 속성을..

programing 2022.08.19

Vuetify Vuex에서 API의 외부 데이터와 함께 데이터 테이블을 사용합니다.

Vuetify Vuex에서 API의 외부 데이터와 함께 데이터 테이블을 사용합니다. Vuex에서 vuetify 프레임워크를 사용하고 싶은데 Vuex에서 사용하는 것에 대한 설명서는 한정되어 있습니다. 하고 싶은 일: 외부 API에서 데이터를 가져옵니다(단, 필요한 데이터만). 그런 다음 데이터를 상태로 저장하고 편집하거나 합니다. 그런 다음 변경 사항을 api로 다시 푸시합니다. vuetify를 사용하여 외부 페이지 표시 및 정렬 예를 몇 가지 시도했지만 하드코드를 하지 않으면 모든 레코드 카운트를 표시할 수 없습니다. 나는 Vue와 Vuetify를 꽤 처음이라 뭔가 오해를 하고 있는 것 같다. {{ props.item.id }} {{ props.item.first_name }} {{ props.item..

programing 2022.08.19

인수가 있는 Vuex 매핑 Getter - 캐시됨?

인수가 있는 Vuex 매핑 Getter - 캐시됨? 다음은 템플릿 내에서 사용하기 위해 Vue 인스턴스에 매핑해야 하는 매개 변수화된 getter가 있는 Vuex Store의 예입니다. const store = new Vuex.Store({ state: { lower: 5, higher: 10, unrelated: 3 }, getters: { inRange: state => value => { console.log('inRange run') return (state.lower = value) } }, mutations: { reduceLower: state => state.lower--, incrementUnrelated: state => state.unrelated++ } }) new Vue({ el:..

programing 2022.08.18

Vuex의 액션이 약속을 반환하는 이유는 무엇입니까?

Vuex의 액션이 약속을 반환하는 이유는 무엇입니까? Vuex 작업에는 컴포넌트에서 payload를 가져오는 변환(개체를 반환하기 위한 인덱스 수)이 있습니다.Vuex js 파일에서는 정상적으로 동작합니다.이것은 payload에서 인덱스를 가져온다고 말한 바와 같이 콘솔에서 선택한 항목을 보여 줍니다.그러나 컴포넌트에서는 정상적으로 동작합니다.Promise 왜 그런 일이 일어나는 거죠?지금은 Nuxt/Vue 앱에 API를 사용하지 않지만, 지금으로서는 왜 이런 일이 일어나는지, 그리고 이 문제를 해결하기 위한 최선의 솔루션이 무엇인지 알고 싶습니다. Vuex 코드: export const state = () => ({ articles: [ { uid: 0, img: 'https://raw.githubus..

programing 2022.08.18

계산된 속성을 효과적으로 사용하는 Vue

계산된 속성을 효과적으로 사용하는 Vue 제 계산 자산에는 아래 코드가 있습니다.기능이 매우 복잡해질 것으로 예상됩니다.여기에 다 있는 게 맞나요?스토어 파일에 넣고 싶은데 계산된 속성 내에서 함수를 이름으로 호출할 수 없습니다.조언 좀 해주시겠어요? computed: { assignValue() { this.valueToSet = this.value1; if (this.valueToSet < 10) { return "1 week" } else if (this.valueToSet < 20) { return "2 weeks" } else if (this.valueToSet < 30) { return "3 weeks" } else { return 0; } } } 요약하자면, my store.js(vuex)에..

programing 2022.08.16

Quasar QTable에 반영되지 않은 vuex 데이터 변경 사항

Quasar QTable에 반영되지 않은 vuex 데이터 변경 사항 Quasar를 Vuex와 함께 사용하여 데이터 세트를 QTable로 로드하고 있습니다.정상적으로 동작하고 있습니다만, QPOPupEdit을 사용하여 프로젝트의 상태를 변경하려고 합니다.데이터는 Laravel API에서 가져옵니다.원래 데이터 세트는 Laravel Resource이기 때문에 각각 Status 객체(item.status_id 및 status: id, status: name 등)를 가진 아이템이 있습니다. 첫 번째 레코드의 상태 값을 q-table 외부에 노출하여 API에 업데이트를 푸시하면 변경된 Item 리소스가 반환되고 vuex 변환의 Vuex 데이터에 삽입되어 테이블에서 업데이트되지 않습니다. {{items[0].sta..

programing 2022.08.16

사용자 지정 지시문에서 v-if 지시문 시뮬레이션

사용자 지정 지시문에서 v-if 지시문 시뮬레이션 v-if와 같은 사용자 지정 지시어의 요소를 삭제해야 합니다(조건이 실패할 경우 항목 생성을 금지합니다). 나 이거 먹어보고 있어 export const moduleDirective: DirectiveOptions | DirectiveFunction = (el, binding, vnode) => { const moduleStatus = store.getters[`permissions/${binding.value}Enabled`]; if (!moduleStatus) { const comment = document.createComment(' '); Object.defineProperty(comment, 'setAttribute', { value: () =>..

programing 2022.08.16

스토어가 정의되어 있지 않습니다.vue.syslog

스토어가 정의되어 있지 않습니다.vue.syslog 로그인 페이지를 작성했습니다.라우터가 요구를 대행 수신하여 사용자가 인증되었는지 확인합니다.스토어는 사용자의 로그인 여부를 유지하고 있습니다. 디버깅 중에 auth.debug에 들어갑니다. "스토어가 정의되지 않았습니다." Import에서도 @가 아닌 relative path를 시도했습니다. 라우터 코드 스니펫 import auth from '@/services/auth'; ... router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!auth.loggedIn()) { next({ path: '/login', }); } el..

programing 2022.08.16