반응형

vuex 59

Vuex Store의 작업 내에서 푸시 경로 푸시

Vuex Store의 작업 내에서 푸시 경로 푸시 매장 내에서 경로 변경을 푸시하려고 합니다.Import를 시도했습니다.router매장 자체에서 다음과 같은 일을 할 수 있습니다. LOG_OUT({commit}){ commit('LOG_OUT__MUTATION'); router.push({ name: 'Login' }) } 하지만 소용없었어요 또한 컴포넌트를 사용하여 직접 루트 변경을 푸시하고 싶지 않습니다.이는 인증을 체크하고 컴포넌트별로 루트 변경을 푸시해야 하기 때문에 번거롭다고 생각되기 때문입니다. 편집 완료: 그LOG_OUT__MUTATION는 스테이트에 저장되어 있는 토큰을 클리어합니다. 드디어 알아냈어 최종 실장 고객님의 고객명store를 Import하기만 하면 됩니다.router: impo..

itsource 2022.08.28

Vue 컴포넌트를 로컬로 등록하는 이점은 무엇입니까?

Vue 컴포넌트를 로컬로 등록하는 이점은 무엇입니까? Vue의 매뉴얼에는 다음과 같이 기재되어 있습니다. 글로벌 등록은 종종 이상적이지 않습니다.예를 들어 Webpack과 같은 빌드 시스템을 사용하는 경우 모든 컴포넌트를 글로벌하게 등록하면 컴포넌트 사용을 중지하더라도 최종 빌드에 포함될 수 있습니다.이로 인해 사용자가 다운로드해야 하는 JavaScript의 양이 불필요하게 증가합니다. 제가 제대로 이해하고 있다면, 사용하지 않는 컴포넌트를 삭제하지 않는 한 로컬 등록을 사용해도 전체 파일 크기가 줄어들지 않습니다.컴포넌트를 로컬로 등록해도 그 컴포넌트는 메인 JS 파일로 풀됩니다(그렇지 않으면 코드가 정의되지 않기 때문에 로컬에서도 컴포넌트를 사용할 수 없습니다). 따라서 로컬 등록을 사용할 수 있는 ..

itsource 2022.08.27

Vuex 모듈 작업에서 vue-router를 사용하는 방법

Vuex 모듈 작업에서 vue-router를 사용하는 방법 하고싶다this.$router.push(path)vuex의 내부 모듈 파일.여기에서는 정의되어 있지 않기 때문에 어떻게 하면 좋을까요?라우터를 Import하기만 하면 다음과 같이 사용할 수 있습니다. import router from 'path/to/router' router.push(path) 왜 이렇게 동작하는 거죠? Vue 파일에서this는 Vue 객체에 바인드되어 있기 때문에 $router나 $store와 같은 특정 메서드를 사용할 수 있습니다. 그러나 일반 JS 파일에서는this는 Vue의 특별한 기능을 포함하지 않는 글로벌오브젝트에 바인드 되어 있기 때문에 라우터를 수동으로 Import 할 필요가 있습니다.언급URL : https://..

itsource 2022.08.27

vue.js 2의 상위 구성 요소에서 하위 구성 요소의 데이터를 재설정하려면 어떻게 해야 합니까?

vue.js 2의 상위 구성 요소에서 하위 구성 요소의 데이터를 재설정하려면 어떻게 해야 합니까? 부모 컴포넌트는 다음과 같습니다. ... ... 모달은 숨겨져 있으면 부모 컴포넌트의 데이터를 리셋하여 동작합니다. 하위 구성 요소에서도 데이터를 재설정하고 싶다 저는 이렇게 시도합니다. ... 근데 안 돼요 하위 구성 요소가 데이터를 재설정하지 않습니다. 어떻게 하면 이 문제를 해결할 수 있을까요?이 코드의 주된 문제는 의 핸들러입니다.LocationSelect에 앞서 추가되고 있습니다. this.$parent.$refs.modal존재한다.aref는 컴포넌트를 마운트할 때까지 존재하지 않습니다. 이 문제를 해결하는 가장 쉬운 방법은 코드를 다음 주소로 이동하는 것입니다.mounted. mounted() {..

itsource 2022.08.21

Uncaughed Type Error: 이거.$store.commit은 함수가 아닙니다.

Uncaughed Type Error: 이거.$store.commit은 함수가 아닙니다. 데이터를 vuex 변환에 커밋하려는 vue 메서드가 있는데, 어떤 이유로 Uncaught TypeError: this가 계속 표시됩니다.$store.commit은 함수가 아닙니다. 목록 항목을 클릭하고 함수를 호출하면 오류가 발생합니다. sample.vue export default { data() { return { search: null, }; }, computed: { filteredItems() { const coins = this.$store.state.coin.coin; if (!this.search) return coins; const searchValue = this.search.toLowerCase(..

itsource 2022.08.21

Vuex getter 메서드가 정의되지 않은 상태로 반환됨

Vuex getter 메서드가 정의되지 않은 상태로 반환됨 getter 메서드를 호출하려고 하는데 어떤 이유에서인지 호출이 되지 않습니다.console.log 스토어를 실행하면 정의되지 않은 것을 알 수 있습니다. 여기서 getter 메서드를 호출합니다. computed: { client() { console.log(this.$store); //see above screenshot console.log(this.$route.params.id); //shows a valid value. //nothing seems to happen after this point, console.log in the below getter doesn't happen. return this.$store.getters['clie..

itsource 2022.08.21

Vuejs/Vuex 돌연변이를 사용하여 vuex 상태의 개체 배열 내에서 개체를 제거하는 방법(필터링)

Vuejs/Vuex 돌연변이를 사용하여 vuex 상태의 개체 배열 내에서 개체를 제거하는 방법(필터링) nested (Object -> Array -> Objcet) vuex 상태 내의 객체를 삭제하려고 합니다. 제 어플리케이션의 시나리오는 다음과 같습니다. 1. 백엔드로 레코드 삭제 요청을 보낸 후 메시지로 회신합니다.그런 다음 vuex 상태로 커밋합니다.UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM여기 모든 게 잘 되고 있어요 async unassignCoursandTeacher({ commit }, classroom) { let response = await Axios.post( "/dashboard/school/unassignCoursandTeacher/" + classr..

itsource 2022.08.21

새로운 에러('사이클 의존성' + nodeRep)를 슬로우합니다.

새로운 에러('사이클 의존성' + nodeRep)를 슬로우합니다. 어플리케이션에서 차트를 많이 사용했는데 가능한 한 vuex 스토어에서 모든 차트 색상을 처리하고 싶습니다.저는 이것을 만들기 위해 아래 코드를 사용했습니다. store.displaces를 설정합니다. import Vue from 'vue' import Vuex from 'vuex' // modules import settings from './modules/settings'; Vue.use(Vuex); export const store = new Vuex.Store({ modules: { settings } }) 챠트 구성.개요 /** * Change all chart colors */ import { store } from "../sto..

itsource 2022.08.21

Nuxt 가져오기 내에서 이름이 지정된 경우에는 Vuex 작업이 작동하지 않음

Nuxt 가져오기 내에서 이름이 지정된 경우에는 Vuex 작업이 작동하지 않음 저는 저만의 작은 프로젝트를 만들고 있습니다.nuxt fetch 메서드 내의 메인스토어(index.js)에서 스테이트에 액세스하려고 하면 모두 정상적으로 동작하지만 namesched(store/photos.js) 스토어에서 액세스하려고 하면 동작하지 않습니다.여기 제 코드가 있습니다. store/index.js (작업) export const state = () => ({ fetchedData: [] }) export const mutations = { setData: (state, data) => { state.fetchedData = data; } } export const actions = { async get(vuexC..

itsource 2022.08.19

Vuejs 3의 변수로 Vuex에 저장된 값을 전달하는 방법(Quasar 2)

Vuejs 3의 변수로 Vuex에 저장된 값을 전달하는 방법(Quasar 2) Vuex 스토어에 날짜 저장 중(날짜) Vuejs(사실 Quasar 2 베타 12) 템플릿 {{ date }}에서 읽을 수 있습니다. 매장에서 날짜를 변경(변환)하면 {{ date }}가 변경됩니다.좋아요. 단, 다른 날짜(dateSet)와 비교한 날짜에 코드를 실행하고 싶습니다.그래서... data () { return { dateVal: this.$store.state.date, dateSet: [a date here] } 그러면 메서드는 dateVal과 dataSet의 비교를 실행합니다. 단, $store.state.date를 변경(변환)하면 dateVal이 아닌 {{date}}일 때 변경됩니다.좋지 않습니다. 요령을 놓..

itsource 2022.08.17
반응형