반응형

vuex 59

약속의 then()을 커밋하면 Vuex3 변환이 작동하지 않음

약속의 then()을 커밋하면 Vuex3 변환이 작동하지 않음 다음과 같은 vuex 스토어가 있습니다. new Vuex.Store({ state: { foo: "initial value" }, mutations: { update_foo (state, payload) { state.foo = payload; } }, actions: { update (context) { context.commit("update_foo", "bar"); APIwrapper("api url to get data") .then(response => context.commit("update_foo", "not bar")) .catch(e => console.error(e)); } } } 내가 할 때store.dispatch('up..

itsource 2022.08.14

Vue 저장소 어레이 선언의 "Not assignable to type never" TS 오류

Vue 저장소 어레이 선언의 "Not assignable to type never" TS 오류 이 에러가 발생하는 이유를 알 수 없습니다. '{ id: string; }' 형식의 인수는 'never' 형식의 매개 변수에 할당할 수 없습니다. ...선상에서const index = state.sections.findIndex((section) => section.id === id); Vue 스토어의 다음 부분에 있습니다. import { MutationTree, ActionTree, GetterTree } from 'vuex'; interface section { id: string; section_header: string; section_body: string; sectionItems: any; } in..

itsource 2022.08.14

사전 로드된 상태의 사용자 지정 nuxt 500 오류 페이지

사전 로드된 상태의 사용자 지정 nuxt 500 오류 페이지 환경: Nuxt.js(SSR을 사용하는 Vue/Vuex/Node 프레임워크). 사용자에게 내부 서버 오류가 발생하면 404 오류에 대해 이미 사용하고 있는 템플릿과 유사한 커스텀 Vue 템플릿을 사용합니다. Nuxt 소스를 보면 커스텀500 페이지를 추가하는 유일한 방법은 기본값을 덮어쓰는 것입니다..nuxt/views/error.html커스텀 에러 페이지를 표시합니다. 단, 사용자가 앱을 다시 시작하기 위해 클릭해야 하는 정적 HTML 페이지는 원하지 않습니다.Nuxt 앱에 '500 error' 상태가 미리 로딩되어 있으면 좋겠습니다. Nuxt 문서에서는 이것을 어떻게 달성해야 하는지 모르겠다.조언 좀 해주시겠어요? 이미 시도해 본 것: 리다..

itsource 2022.07.21

vuex 작업 반환의 메서드가 정의되지 않았습니다.

vuex 작업 반환의 메서드가 정의되지 않았습니다. Vuex 액션에는 다음과 같은 방법이 있습니다. const actions = { async fetchByQuery({ commit, title }) { console.log(title); //other codes }, }; And method to reach to vuex action: methods: { ...mapActions(["fetchByQuery"]), getData(title) { console.log("teacher"); this.fetchByQuery(title); } } 단, 액션의 console.log()에 의해undefined출력을 표시합니다. 내가 뭘 놓쳤지?동작에 포함된 매개 변수를 잘못 알고 있습니다. ({ commit, ti..

itsource 2022.07.21

vue에서 입력이 포커스를 잃었을 때 함수를 실행하는 방법

vue에서 입력이 포커스를 잃었을 때 함수를 실행하는 방법 입력란이 있어서 거기에 금액을 입력할 수 있습니다.따라서 사용자가 입력 필드 외부를 클릭했을 때 카트를 업데이트하는 것이 목표입니다. {{ item.product_name }} x € {{ item.price_excl_vat }} 여기 보시는 것처럼 v-model "item-amount" 입력 필드가 있습니다.또한 데이터를 가져오는 기능도 있습니다. updateCart(id, amount) { cartHelper.updateCart(id, amount, (response) => { this.$store.dispatch('updateProductsInCart', { cart: response.data, }) }); } 그래서 입력란 바깥쪽을 클릭할..

itsource 2022.07.21

Vuex 상태에서 nuxt '$config'에 액세스하는 방법액세스 방법만 스토어 액션 방식을 사용합니까?

Vuex 상태에서 nuxt '$config'에 액세스하는 방법액세스 방법만 스토어 액션 방식을 사용합니까? .env 파일을 사용하기 위해 dotenv 라이브러리를 사용해 왔지만 프로젝트 개인키가 쉽게 노출된다는 것을 알고 있기 때문에 runtimeConfig를 변경해야 합니다. 최근 프로젝트에서 nuxt "^2.14"를 사용했고 모드는 SPA입니다.이와 같이 nuxt.config.ts에는 "public Runtime Config"만 사용합니다. .env Test_BASE_URL:'https://test.org' nuxt.config.ts export default { publicRuntimeConfig:{baseURL: proccess.env.Test_BASE_URL||''} } 나는 vue 파일에서 그..

itsource 2022.07.21

농담으로 "이" 객체에 대한 메서드를 조롱하다

농담으로 "이" 객체에 대한 메서드를 조롱하다 다음과 같은 구현이 있습니다. export const actions = { async submitPhoneNumber(context) { let data = await this.$axios. $get('https://jsonplaceholder.typicode.com/todos/1') // do something with data return data } } 테스트를 실행하면 TypeError: 정의되지 않은 속성 '$get'을 읽을 수 없습니다. 어떻게 조롱하지?this.$axios.$get? 나는 조롱하는 것을 보았다.global농담이지만 조롱하는 투덜투덜global그저 조롱하는 창문일 뿐이지신경쓰지 말아요. 조롱할 필요가 있다this물건. 이게 제 테스..

itsource 2022.07.17

수집되지 않은 참조 오류: 버스가 정의되지 않았습니까?(v.1992)

수집되지 않은 참조 오류: 버스가 정의되지 않았습니까?(v.1992) 다음 튜토리얼을 따릅니다.https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication 컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위해서 아래 사례를 참조하십시오.나는 그렇게 노력한다. 제 견해는 이렇습니다. search-filter-view 컴포넌트는 다음과 같습니다. search-result-view 컴포넌트는 다음과 같습니다. 덧붙이자면var bus = new Vue();\sys\assets\sys\app.sys\sys\sys\syslogs로 어디서든 액세스 할 수 있습니다. getVueItems 메서드(컴포넌트 2)에 대한 정렬 파라미터(filterBySo..

itsource 2022.07.17

Vue 클래스 구성 요소, Vuex 클래스를 사용하는 경우의 ESLint 오류

Vue 클래스 구성 요소, Vuex 클래스를 사용하는 경우의 ESLint 오류 사용하고 싶습니다vuex-classvuex 및 vuex의 바인딩 도우미용vue-class-component 근데 이렇게 써있네요 error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead. App.vue @Component export default class App extends Vue { mounted() { ... } } 마지막에 내보내기를 시도합니다. @Component class App extends Vue { mounted() { ... }..

itsource 2022.07.17
반응형