반응형

vuex 27

VueX 및 스크립트 설정과 함께 양식을 사용하는 방법v-model을 사용합니까?

VueX 및 스크립트 설정과 함께 양식을 사용하는 방법v-model을 사용합니까? 편집: VueX는 구식이고 피니아는 요즘 사람들이 사용하는 것이기 때문에 전혀 사용하지 말아야 합니까? https://stackblitz.com/edit/vue-script-setup-with-vuex-hmrk5d?file=src/store.ts 양식 정보를 입력하고 "저장" 버튼을 클릭하면 양식 아래의 "결과" 섹션에 표시됩니다. VueX 스토어 전체를 만들었습니다.돌연변이와 행동 그리고 이미 한 모든 것들.양식 작업으로 구현하는 방법을 모르겠습니다. "v-model"을 사용합니까?아니면 디스패치 기능을 생성해야 합니까?그렇다면 디스패치 기능은 어디에 두나요?폼 요소의 "값" 및 "이름" 속성은 어떻게 여기에 포함됩니까?..

programing 2023.07.18

v-for 루프의 요소에 클래스를 추가하는 중

v-for 루프의 요소에 클래스를 추가하는 중 나는 v-for 루프를 가지고 있고, 나는 만들기를 원합니다.background: red;클래스를 추가합니다.그러나 수행 단추를 클릭하면 모든 인덱스가 색칠됩니다.제 목표는 우선순위 버튼을 클릭할 때 3개의 요소가 있으면 해당 줄(색인) 배경을 빨간색으로 만드는 것입니다.즉, 목록 요소는 배경을 빨간색/노란색/녹색으로 만듭니다. {{ item.text }} 지금은 일반 vuejs의 클래스 바인딩 속성을 시도합니다.하지만 제가 말씀드린 것처럼 모든 부서를 물들입니다. Github Repo 링크: https://keremunce.github.io/Vue-ToDo/간단한 해결책은 다음을 추가하는 것입니다.color각 작업관리 개체에 고정합니다. 그런 다음 클래스를..

programing 2023.07.08

다음으로 두 구성 요소 간에 데이터 전송

다음으로 두 구성 요소 간에 데이터 전송 이 주제에 오신 것을 환영합니다.최근에 Nuxt 프레임워크를 사용하여 웹 애플리케이션을 만들려고 했지만 문제에 부딪혔습니다. 기본 레이아웃에는 머리글 구성 요소와 사이드바 구성 요소의 두 가지 구성 요소가 있습니다. 머리글 구성 요소에서 햄버거 아이콘을 클릭하면 사이드바가 햄버거 아이콘 상태(참 또는 거짓)에 따라 더 작아지거나 커져야 합니다. 그래서 더 복잡하게 만들기 위해 다른 구성 요소를 통해 보내기 위해 소품을 사용하고 싶지 않습니다. 사람들이 쉽게 사용할 수 있도록 템플릿으로 만들고 싶습니다. 로컬 구성 요소 변수를 다른 구성 요소가 사용할 수 있는 글로벌 변수로 변환할 수 있습니까? 그래서 제가 지금 가지고 있는 코드는 다음과 같습니다. 이것은 색인 페..

programing 2023.07.08

Vuex 변환: ES6 구문을 사용하여 상태 매개변수를 분해합니다(퀘이사 프레임워크 사용).

Vuex 변환: ES6 구문을 사용하여 상태 매개변수를 분해합니다(퀘이사 프레임워크 사용). 저는 두 개의 다른 구문을 가지고 있습니다.mapGetters() 및 mapActions()를 사용하여 getters 및 작업에 액세스할 수 있습니다.첫 번째 것은 상태 매개 변수를 분해하지 않고 작동합니다.두 번째는 상태를 분해하지만 돌연변이가 상태를 변형시키지 않는 반면, 게터는 상태에 접근할 수 있고 동작은 컨텍스트를 분해하는 데 문제가 없습니다. 나는 왜 그런지 이해하지 않아요.ES6 / vuejs / vuex / 퀘이사를 잘못 사용합니까? Vue.use(Vuex) export default new Vuex.Store({ state: { counter1: 0, counter2: 0 }, getters: {..

programing 2023.06.28

Vuex, 계산된 속성은 반응성이 없습니다.

Vuex, 계산된 속성은 반응성이 없습니다. 일부 구성 요소(하위 구성 요소) 간에 각 하위 구성 요소(및 상위 구성 요소)가 공유 속성을 업데이트할 수 있는 상태(vueX 상태 저장)를 만들려고 합니다. 저는 여기서 작은 "복제 방법"을 만들었습니다. Vue.component('urlQueryComponent', { template: 'object: {{pathQuery}}', computed: { pathQuery () { return this.$store.state.urlQuery; } } }) https://codepen.io/anon/pen/rvmLrZ?editors=1010 문제는 하위 구성 요소의 상태를 업데이트할 때 변경 사항이 처리되지 않는 것입니다. VueX 인스턴스: const sto..

programing 2023.06.23

사용자 지정 구성 요소 | 초기화 전에 '스토어'에 액세스할 수 없습니다.

사용자 지정 구성 요소 | 초기화 전에 '스토어'에 액세스할 수 없습니다. 사용자 지정 구성 요소 내의 vuex 저장소에 액세스하려고 합니다.다음과 같은 구성 요소를 만듭니다. import { defineCustomElement } from 'vue'; import expensemain from '~/components/expense_editor/Main.ce.vue'; const CustomElement = defineCustomElement(expensemain); window.customElements.define('expense-custom', CustomElement); 스토어를 다음과 같이 가져옵니다. import store from "../../store/store.js"; export de..

programing 2023.06.13

Vuex - rawModule이 정의되지 않음 단일 모듈에서 여러 모듈로 이동

Vuex - rawModule이 정의되지 않음 단일 모듈에서 여러 모듈로 이동 설명서에 따라 vuex 스토어의 단일 모듈에서 여러 모듈로 프로젝트를 이동. 다음과 같이 특정 모듈에 액세스해야 한다고 명시되어 있습니다. store.state.a // -> `moduleA`'s state 이것은 모듈 상태에 액세스할 때 사용합니다.특정 모듈의 'commit' 및 'replaceState'와 같은 명령어는 물론 getter 및 mutronti에 액세스하는 방법도 기재되어 있지 않기 때문에 다음과 같은 결론을 내렸습니다. store.getters.a store.mutations.a store.a.commit() store.a.replaceState() 1) 그 결론이 맞습니까? 2) 이것을 사용하면, 정말로 일..

programing 2022.12.13

Vuex 스토어는 Nuxt 어디에 있습니까?

Vuex 스토어는 Nuxt 어디에 있습니까? Vuex / Nuxt에 대해 알아보려고 합니다.nodejs도 꽤 생소합니다. nuxt가 서버 측 렌더링 앱인 경우 Vuex는 어디서 "reside"합니까?표준 Vue에서는 Vuex는 클라이언트 측 스토어입니다.Nuxt에서는 어떻게 작동합니까?아직 클라이언트 측 스토어인데 서버 상에서 먼저 렌더링만 하나요? 서버에 있는 경우는, 유저별의 데이터를 어떻게 처리하고 있는지, 아니면 공유되고 있는지 궁금할 뿐입니다.감사해요.SSR 및 보충: 클라이언트와 서버 모두 상태를 유지합니다.클라이언트가 첫 번째 페이지 로드를 요청할 때 상태는 보통 스크립트 내의 html 문서를 통해 전달됩니다.다음은 예를 제시하겠습니다. 그런 다음 응용 프로그램이 상태를 픽업해야 하는 경우 ..

programing 2022.11.24

i18n을 사용한vue 3 vite의 국제화

i18n을 사용한vue 3 vite의 국제화 현재 vue 3 vite 프로젝트를 "@intlify/vite-plugin-vue-i18n"로 국제화하려고 합니다.여기서 직면한 문제는 현재 모든 컴포넌트에 대해 t 변수를 Import하여 설정해야 한다는 것입니다. 컴포넌트 예시: t('translation') 질문입니다만, 가능하다면 변수 t를 글로벌하게 하는 가장 좋은 방법은 무엇일까요?모든 컴포넌트에 수입하고 있기 때문에, 이 예나 도움은 찾을 수 없습니다.모든 도움에 감사 드립니다! :)참고를 위해 관련 파일을 보내드립니다. export default defineConfig({ plugins: [ vue(), vueI18n({ include: path.resolve(__dirname, './src/lo..

programing 2022.11.14

store/index.js의 내보내기 외부 상태에 액세스하는 방법

store/index.js의 내보내기 외부 상태에 액세스하는 방법 저는 Axios를 스토어 액션으로 사용하고 있으며, 어떤 상태에 따라 Axios 헤더를 설정하고 싶습니다(승인된 언어에 대한 요청 헤더를 변경).내보내기 외부에 있는 저장소에 액세스하려고 하면 "cannot find property state of defined" 오류가 나타납니다.나의store/index.js파일: import Vue from "vue"; import Vuex, { Store } from "vuex"; import Axios from "axios"; Vue.use(Vuex); Axios.defaults.headers['Accept-Language'] = store.state.Lang const store = new Vue..

programing 2022.11.04
반응형