반응형

vuex 285

Vue: 라우팅에서 컴포넌트를 두 번째로 렌더링하지 않음

Vue: 라우팅에서 컴포넌트를 두 번째로 렌더링하지 않음 나는 이해할 수 없는 Vue의 행동을 마주하고 있다.컴포넌트간의 루팅을 사용하고 있습니다. methods: { redirectToLogin() { this.$router.push("/login"); }, redirectToRegister() { this.$router.push("/register"); } } 따라서 앱을 로드할 때 Login 컴포넌트를 라우팅하고 정상적으로 로그인한 후 위의 방법으로 컴포넌트에 로그아웃합니다.그 후 다시 로그인하기 위해 라우팅을 시도하면 Login 컴포넌트는 렌더링되지 않지만 주소 행에 루트가 표시됩니다. 아래에 나의 루트를 볼 수 있다. routes: [ {path: '/', name: 'Hello', compon..

programing 2022.06.02

Vuex를 사용하여 컴포넌트에 데이터 바인딩

Vuex를 사용하여 컴포넌트에 데이터 바인딩 처음입니다vue.js그리고 나는 그것을 이용하려고 하고 있다.vuex제 문제는 다음과 같습니다. (컴포넌트인) 기사 리스트가 있는 스토어에 링크되어 있습니다.v-for="article in articles및 계산된 속성: computed: { articles() { return this.$store.state.articles } } 다음은 저희 가게의 데이터입니다. state: { articles: [{ title: "Article 1", id: 1, description: "Article 1", }, { title: "Article 2", id: 2, description: "Article 2", } }] } 기사를 클릭했을 때, 문서 페이지 템플릿(컴포넌트..

programing 2022.06.02

동적으로 등록된 모듈에서 vuex 변환에 액세스할 수 없음

동적으로 등록된 모듈에서 vuex 변환에 액세스할 수 없음 vue 컴포넌트에 대해 API 데이터를 가져와 유지하는 모듈을 만들었습니다. import Vue from 'vue'; export default { namespaced: true, state() { return { all: [] } }, getters: { all(state) { return state.all; } }, mutations: { all(state, data) { Vue.set(state, 'all', data); }, clear(state) { Vue.set(state, 'all', []); } }, actions: { async init({ commit, state }) { let response = await this.axios..

programing 2022.06.02

vuex 작업에서 bootstrap-vue 모달 및 토스트를 호출하는 방법은 무엇입니까?

vuex 작업에서 bootstrap-vue 모달 및 토스트를 호출하는 방법은 무엇입니까? vuex와 함께 boostrap-vue를 사용해보신 분 있나요?나는 vuex 액션에서 모달과 건배사를 부르는데 어려움을 겪고 있다. 물론 사용할 수 없습니다.thisvuex 스토어에서 사용할 수 없습니다. this.$bvModal.show('modalId'); 나도 이렇게 모달한테 전화해봤어 import Vue from 'vue'; Vue.prototype.$bvModal.show('transaction'); 그러나 콘솔에 다음과 같은 경고가 표시됩니다. BootstrapVue 경고]:'$bvModal'은 Vue 인스턴스 'this' 컨텍스트에서 액세스해야 합니다. vuex 액션에서 모델 및 건배사를 직접 호출할 수..

programing 2022.06.02

Firebase Vuex에서 항목 제거

Firebase Vuex에서 항목 제거 Vue는 처음이라 Firebase로 심플한 CRUD 애플리케이션을 구축하여 Veux를 배우고 싶었습니다.지금까지 파악해 왔지만(코드에 문제가 있는 것이 있으면 피드백해 주시면 감사하겠습니다) 아이템을 삭제하는 방법을 알 수 없습니다.가장 큰 문제는 제가 그것을 제대로 참조할 수 없다는 것입니다.나 이제...[object Object]내 참조 경로에서 로그 기록 시 올바른 ID를 얻을 수 있습니다. 파이어베이스 흐름: 그래서 제가 언급하고 있는 것은'items'Firebase는 각 항목에 대해 하나의 키를 생성하고, 나는 그것을 참조할 수 있도록 id에 추가했지만, 키로 참조할 수도 있었다. Veux를 사용하지 않고 컴포넌트 상태만으로 이 작업을 수행할 수 있었습니다..

programing 2022.06.02

Vuex의 4가지 상태를 구별하는 방법

Vuex의 4가지 상태를 구별하는 방법 내가 배울 때 네 개의 상태를 구별할 수 없다.Vuex(상태, 정보, 취득자 및 행동).나는 알 수 밖에 없다.'state'컴포넌트 및'mutations'상태를 변경할 수 있습니다.하지만 다른 두 가지는 이해하기 어렵다고 느껴요.이거 어떻게 해?Getter는 기본적으로 다음과 같이 사용할 수 있습니다.computedproperty - 어떤 목적을 위해 해당 상태의 데이터를 조작하는 데 사용할 수 있습니다. 예를 들어, 주의 작업관리 항목 목록이 있는 경우 완료된 작업관리 항목만 출력하는 getter 또는 가장 중요한 항목만 출력하는 getter를 가질 수 있습니다. 동작은 변환과 같은 작업을 수행해야 할 때 사용되지만 비동기 연산에 의존하는 방식으로 사용됩니다.일반..

programing 2022.06.01

페이지를 새로 고칠 때마다 계속 계산하는 방법

페이지를 새로 고칠 때마다 계속 계산하는 방법 계산된 사용자 데이터의 값을 데이터 내의 개체에 할당할 수 없지만 페이지가 새로 고쳐지면 데이터가 손실됩니다. import Vuetify from "vuetify" import { UserData } from "../../store/userModule"; import jsonDict from "../../jsonFiles/data.json" import jsonfile from "../../jsonFiles/jsonfile"; export default { name: "userProfileUpdate", data() { return { selected: "Choose Province", rules: [ value => !!value || 'Bu alan bo..

programing 2022.06.01

[ Dynamic access object ]필드

[ Dynamic access object ]필드 Vuex를 리팩터링하고 있는데 다음과 같은 일반적인 작업이 있습니다. deleteFromList ({commit}, {list = '', type = '', listPlural = '', data = {}}) { db.rel.find(list, data).then(doc => { return db.rel.del(list, doc.rooms[0]) }) } 한다면list로 설정되어 있다.room, 응답을 반환합니다.doc.rooms룸 배열을 포함하는 객체입니다. 이 경우listPluralparam은 다음과 같은 값으로 전달됩니다.rooms. 어떻게 돌아가죠?doc.rooms[0]동적으로 사용listPlural대신 param? 뭐랄까doc.listPlural..

programing 2022.06.01

정적 콘텐츠(예: 국가 코드)를 vue.js 앱의 어디에 저장합니까?

정적 콘텐츠(예: 국가 코드)를 vue.js 앱의 어디에 저장합니까? 이 문제에 대한 일반적인 베스트 프랙티스를 찾으려고 했지만 잘못된 곳을 찾고 있는 것 같습니다.vue.js 앱에 국가 코드 등의 콘텐츠(또는 카테고리 배열 등 기타 정적 콘텐츠)를 저장하는 모범 사례는 무엇입니까?그것을 환경변수로 .env 파일에 저장하는 것은 곤란합니다.또 다른 설정변수도 아닙니다. 사용자나 앱에 의해 변경되지 않는 불변의 데이터인데도 Vuex에 저장해야 합니까?아니면 js파일을 만들어서 필요한 곳에 Import하면 되나요?각진 상태JS는 HelperService에 함수로 넣었을 뿐인데... function getCountryArray() { var countries = { 'AF': 'Afghanistan', 'AX..

programing 2022.06.01

Nuxt.js의 서버 측과 Vuex 스토어 동기화

Nuxt.js의 서버 측과 Vuex 스토어 동기화 문제 Nuxt 미들웨어 이하 const inspectAuthentication: Middleware = async (): Promise => { await AuthenticationService.getInstance().inspectAuthentication(); }; 각 페이지의 HTML을 반환하기 전에 서버 측에서 실행되고 있으며 체크가 사용자 인증되었습니다.되어 있는 는, 「」가 됩니다.CurrentAuthenticatedUserVuex 모: : import { VuexModule, getModule as getVuexModule, Module as VuexModuleConfiguration, VuexAction, VuexMutation } from..

programing 2022.05.31
반응형