반응형

vuex 217

vuex에서 작업을 생성하는 올바른 방법

vuex에서 작업을 생성하는 올바른 방법 a1로 단순(당시/캐치 호출에 체인을 지정하지 않고) vuex 작업을 만들기에 충분한가?아니면 a2로 생성되는 약속(+또한 거부 분기를 추가)으로 매번 작성해야 하는가? 미리 고맙다... import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const debug = process.env.NODE_ENV !== 'production'; export default new Vuex.Store({ state: { ... } ... actions: { a1: (state, response) => { state.commit('setNavMenu',{signIn: true, signUp: true, signOut: fal..

IT이야기 2022.04.01

계산된 속성이 읽기 전용 입력에서 업데이트되지 않음

계산된 속성이 읽기 전용 입력에서 업데이트되지 않음 기본적으로 읽기 전용으로 설정된 입력 필드가 있으며, 버튼을 클릭하면 항목 편집이 가능해야 한다. 읽기 전용 필드가 없으면 필드가 올바르게 업데이트되는 것 같다. 그것이 없으면, 나는 항목을 편집하고 포커스가 없어지면 그것은 이전의 텍스트로 되돌아간다. data(){ return { edit: false, } } methods: { ...mapMutations(['setKey']), editItem() { this.edit = true; this.$nextTick( () => this.$refs.input.focus() ); } } computed: { ...mapGetters(['getKey']), inputValue: { get() { return ..

IT이야기 2022.03.30

Vuex: REST API에 대한 약속 호출을 사용하여 비동기 작업 처리

Vuex: REST API에 대한 약속 호출을 사용하여 비동기 작업 처리 구성 요소를 렌더링할 때 원격 API에서 항목 목록을 로드해야 하는 장난감 앱을 만들기 위해 TypeScript with Vue/Vuex를 사용한다.아래 작업에서 나는 라이브러리를 사용한다.axioshttp 요청을 할 경우, 약속으로 이를 반환한다. const actions = { getCurrentSession(context: Context) { return axios.get("http://localhost:3000/sessions/current") .then((res) => { commitSharedFiles(context, res.data.shared_files); }) .catch((e: string) => { console..

IT이야기 2022.03.29

vue 3.2에서 사용자 지정 요소 정의와 함께 vuex를 사용하는 방법

vue 3.2에서 사용자 지정 요소 정의와 함께 vuex를 사용하는 방법 Vue 버전 3.2에서는 새로운 미래 defineCustomElement를 사용하여 사용자 지정 요소를 정의할 수 있음 defineCustomElement와 함께 저장(vuex)을 사용하는 방법이렇게 해결했어 // App.ce.vue {{ state }} 참조URL: https://stackoverflow.com/questions/69462522/how-to-use-vuex-with-definecustomelement-in-vue-3-2

IT이야기 2022.03.28

Nuxt.js vuex 스토어가 유지되지 않음

Nuxt.js vuex 스토어가 유지되지 않음 내 Nuxt.js Setup에 이상한 문제가 있어.Store의 일부 상태는 지속적이지 않으며, 다른 보기를 로드할 때마다 기본값으로 되돌아갔다. 페이지/테스트부에를 하다 test | {{this.$store.state.test}} | store/index.js export const state = () => ({ test: "test" }) export const mutations = { setTest: (state) => state.test = 'Hello' } 테스트시나리오에서는 상태를 "Hello"로 설정하는 돌연변이 커밋 "setTest"로 메소드를 호출하는 "테스트" 버튼을 누른다.현재 잘 작동하지만 보기를 변경하거나 페이지를 다시 로드하면 상태가 ..

IT이야기 2022.03.27

라우터는 왜 이다.밀어서 안 되는 거야?[Vue3] [Vuex4]

라우터는 왜 이다.밀어서 안 되는 거야?[Vue3] [Vuex4] 나는 Vue 3과 Vuex와 약간의 문제가 있다.내 Vuex 파일에 로그인했을 때 사용자를 리디렉션하려고 하는데 예상대로 작동하지 않아.오류를 반환하는 것이 아니라 링크를 변경하지만 다른 페이지로 리디렉션되는 것은 아니다. 내 행동은 이렇게 생겼어; actions: { async login(commit: any, payload: any ) { const cookie_token = useCookies(); API.post('/login', { email: payload.email.value, password: payload.password.value }) .then((response: any) => { notif.success('Welcom..

IT이야기 2022.03.26

Vue.js - Vuex를 사용하여 동적 사이드바 사고 방식(Navbar에서 사이드바까지) 열기/닫기

Vue.js - Vuex를 사용하여 동적 사이드바 사고 방식(Navbar에서 사이드바까지) 열기/닫기 웹 사이트에서 동적 사이드바를 만들려고 하는데 메뉴 단추가 다른 구성 요소(Navbar)에 있어.어떻게 하면 그들이 vuex를 통해 서로 의사소통하게 할 수 있을까?봐, 나도 같은 구성 요소에서 어떻게 하는지는 알지만, 난 여기서 Navbar에서 사이드바로 부울 상태를 전달하기 위해 애쓰고 있어.다음과 같이 스토어를 정의하십시오. 'vue'에서 Vue 가져오기 'vuex'에서 Vuex 가져오기 Vue.use(Vuex); export const store = new Vuex.Store({ state: { sideBarOpen: false }, getters: { g_sideBarOpen(state){ re..

IT이야기 2022.03.26

Vue Test Utils / Jest - 구성 요소 방법 내에서 클래스 방법이 호출되었는지 테스트하는 방법

Vue Test Utils / Jest - 구성 요소 방법 내에서 클래스 방법이 호출되었는지 테스트하는 방법 나는 나의 단위 시험에 흥미로운 문제가 있다.내 유닛 테스트는 부품 안의 버튼을 클릭하기 위해 작성된다.이 버튼은 클래스의 인스턴스를 포함하는 구성 요소 메서드를 호출함Service(Axios에 대한 래퍼 클래스).이 구성 요소 방법이 하는 유일한 일은 호출이다.Service.requestPasswordReset()내 유닛 테스트는 다음을 검증해야 한다.Service.requestPasswordReset부름을 받았다. 나는 내가 서비스 클래스를 올바르게 조롱하고 있다는 것을 안다. 왜냐하면 이 클래스는 내 유닛 테스트에서 통과하기 때문이다. await Service.requestPasswordRe..

IT이야기 2022.03.25

여러 Vuex 경로에서 데이터를 로드하려면 다중 사용 Vue 구성 요소를 어떻게 구성해야 하는가?

여러 Vuex 경로에서 데이터를 로드하려면 다중 사용 Vue 구성 요소를 어떻게 구성해야 하는가? 여러 번 다른 vuex 네임스페이스를 가리키고(데이터를 로드) 인스턴스화할 수 있는 구성 요소를 만들고 싶다.이 부품은 대부분의 데이터를 Vuex에서 얻는다.그래서 Person 구성 요소가 있다고 가정하면, Vuex로의 다른 경로를 기반으로 Person 구성 요소의 많은 복사본을 인스턴스화할 수 있다. 내가 이 방법을 알아낸 가장 좋은 방법은 vuex 경로를 소품으로 통과하는 것이지만, mapGetters와 친구들은 .vue 파일이 인스턴스화될 때 네임스페이스를 필요로 하기 때문에 어떻게 사용하는지 모르겠다. 나는 이것을 구성할 수 있는 가장 좋은 "Vue way"에 대한 통찰력을 고맙다.여기 내가 지금 알..

IT이야기 2022.03.24

v-data-table 끌어서 놓기 설정

v-data-table 끌어서 놓기 설정 나는 V-data-table과 vuex store를 함께 사용하고 있다.다음은 v-data-table을 구성하는 방법 각 열에서 정렬 사용 안 함 v-data-table 항목을 vuex 상태 저장 데이터와 바인딩 정렬 가능한 j를 사용하여 행을 끌어서 놓기 문제:v-data-table에서 행을 드래그 앤 드롭하면 vuex 저장소를 업데이트하는 것이다(배열에 있는 개체의 인덱스 값을 테이블 행 인덱스 값으로 업데이트).Vuex가 올바르게 업데이트되고 있지만 v-data-table에 렌더링된 데이터가 Vuex 상태 저장소에 있기 때문에 순서가 잘못됨 이 일에 누가 좀 도와줄 수 있을까? 이 문제를 극복하기 위해 노력한 가장 좋은 방법은 v-data-table 구성 요..

IT이야기 2022.03.22
반응형