lovecodes

vuex 4.x에서 'useStore' API 사용 공식 예제에 따라 자신의 예제를 내보냅니다.useStore컴포넌트에서 사용합니다. import { createStore, Store, useStore as baseUseStore } from 'vuex'; export const key: InjectionKey = Symbol(); export function useStore() { return baseUseStore(key); } 컴포넌트에서 사용 setup() { const store = useStore(); const onClick = () => { console.log(store) store.dispatch('user/getUserInfo'); } return { onClick, } }, 실행 후..

$route에서 VueJS 워처를 테스트하는 방법 vue 라우터를 사용하여 $route를 감시하는 단일 파일 컴포넌트를 테스트하고 있습니다.문제는 경로 변경과 감시자 기능을 모두 실행할 수 없다는 것입니다. 테스트 파일: import { createLocalVue, shallow } from 'vue-test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; const localVue = createLocalVue(); localVue.use(Vuex); const $route = { path: '/my/path', query: { uuid: 'abc' }, } wrapper = shallow({ localVue, store, mocks: { $route..

Base64 또는 ArrayBuffer로부터의 Vue 이미지 플라스크 백엔드가 있어 아래 설명에 따라 이미지를 vue 프론트엔드로 전송합니다. with open('my_image_file.jpg', 'rb') as f: image_data = f.read() emit('IMAGE', {'image_data': image_data}) vue 프런트 엔드에서는 최종적으로 이미지가 웹 페이지에 표시됩니다.이미지를 정적 폴더에 저장하는 것이 가장 쉬운 방법일 것입니다.제 가게에는 다음과 같은 액션이 있습니다. const actions = { SOCKET_IMAGE (commit, image) { console.log("image received") /* What needs to be done to save im..

Vue/Vuex가 생성된 후크에서 비동기 디스패치를 기다립니다. 파이어베이스에서 데이터를 가져오는 함수를 비동기화하는 데 문제가 있습니다. 컴포넌트가 생성되면 다음과 같이 처리됩니다. created(){ this.$store.dispatch("fetchSections"); } Vuex 액션: actions: { async fetchSections({ commit }) { var sectionsRef = db.collection("sections"); try { await sectionsRef.get().then((querySnapshot) => { var collect = querySnapshot.docs.map((doc) => doc.data()); commit("addToSections", colle..

Vue 3에 Vuex 스토어를 삽입하는 방법 Vue 3에 vuex를 주입하는 방법은 다음과 같습니다. new Vue({ el: '#app', store: store, }) 하지만 Vue 3에서는 어떻게 하겠습니까?new Vue().생성된 저장소는 다음을 사용하여 주입됩니다..use방법: import { createApp } from 'vue' import { createStore } from 'vuex' // Create a new store instance. const store = createStore({ state () { return { count: 1 } } }) const app = createApp({ /* your root component */ }) // Install the store ..

처음 방문할 때까지 v-tab 내의 구성 요소에서 Vuex 상태를 볼 수 없음 vuetify: ^2.5.10 vuex: ^3.6.2 vue: ^2.6.14 저는 v-tabs에서 개발한 어플리케이션을 가지고 있습니다.이 탭의 첫 번째 자 컴포넌트에는 Commit 와 함께 commitData() { this.$store.commit('setFile', this.file) }, 상위 구성 요소에서 다음과 같은 계산된 속성이 있으므로 저장소가 올바르게 설정되었습니다. computed: { ...mapGetters({ file: 'getFile', }), }, 동작하고 있는 것 같습니다.저는 이렇게 봅니다. file: { deep: true, immediate: true, handler() { console.lo..

타이프 스크립트가 콜백의 조건을 검출하지 않음(Vue 제 Vuex 스토어에는foo가능성이 있는 물체null그 속성 중 하나에 액세스하기 전에(id예를 들어)를 확인해야 합니다.this.$store.state.foo는 늘이 아닙니다. 항상 정상적으로 동작하지만 TypeScript는 Axios 콜백의 상태를 검출하지 못하는 것 같습니다. private join(): void { if (this.$store.state.foo) { // console.log(x); private join(): void { if (this.foo) { setTimeout(() => { this.print(this.foo); // ERROR }, 1000); } } private joinWithCapture(): void { co..

Vuex Getters 및 Types 저는 Vuex와 Composition API를 사용하는 프로젝트가 있습니다.typescript를 유효하게 하고 스토어 모듈의 getter에서 다음과 같이 부울값을 풀해야 하는 컴포넌트가 있습니다. const flag = computed(() => store.getters['test/flag']) 개발 중에는 코드는 정상적으로 동작하지만, 작성하려고 하면 다음과 같은 타입의 에러가 발생합니다. 106:33 오류 임의 값에 대한 안전하지 않은 멤버 액세스 ['test/flag'] @typescript-eslint/no-safe-member-access 106:33 오류 입력된 값의 안전하지 않은 반환 @typescript-eslint/no-discript-return g..

vue 컴포넌트에서 저장 버튼을 클릭한 후 모드를 닫으려면 어떻게 해야 합니까? 내 vue 컴포넌트는 다음과 같습니다. ... ... Save addPhoto 버튼을 클릭하면 addPhoto 메서드가 호출됩니다. addPhoto 메서드를 사용하여 Ajax를 호출합니다.ajax 응답 후 부모 컴포넌트의 createImage 메서드에 응답을 전달합니다. 실행 후 모달은 닫히지 않습니다.저장 버튼을 클릭한 후 모달 닫기 createImage 메서드를 호출한 후 모달은 어떻게 닫습니까?이 방법으로는 부트스트랩과 Vue를 함께 사용할 수 없습니다.각자 DOM을 통제하고 싶어하고 서로의 발을 밟을 거야이러한 구성 요소를 함께 사용하려면 래퍼 구성 요소가 필요합니다. 그러면 부트스트랩이 구성 요소 내부의 DOM을 제..

초기 라우팅 전에 Vuex 작업 실행 Vuex 및 Vue Router를 셋업했습니다.사용자 계정이 올바르게 설정되어 있지 않은 경우에 대비하여 설정 페이지를 표시하고 싶습니다.이는 백엔드에 API 콜을 발신함으로써 구현됩니다.결과는 Vuex에 저장되며 getter를 사용하여 액세스됩니다.액션은 로 디스패치 됩니다.beforeCreate루트 Vuex 인스턴스: new Vue({ router, store, render: h => h(App), beforeCreate() { this.$store.dispatch("config/get"); } }).$mount("#app"); 단, 라우터는beforeEach수신 불가true하지만 겟터는 분명히 돌아올거야trueDevTools에 따르면: router.beforeE..