반응형

vuex 87

vue 부트스트랩 드롭다운 목록 항목을 동적으로 추가하는 방법

vue 부트스트랩 드롭다운 목록 항목을 동적으로 추가하는 방법 bootstrap-vue를 사용하여 drowdown 목록 항목을 동적으로 추가하려고 하는데 브라우저에 렌더링할 드롭다운 목록 항목을 가져올 수 없습니다.지금까지 제가 들은 내용은 이렇습니다. 어떤 의견이라도 주시면 감사하겠습니다.원래의 JSON이 변경되었을 경우, 코드를 변경하지 않고 드롭 다운 리스트의 아이템을 변경할 수 있도록, dynamic하게 하고 싶다. 메모: reportData는 객체의 목록입니다.그래서 reportData의 첫 번째 요소를 드롭다운목록 항목을 렌더링하는 newData로 설정합니다. 드롭다운 목록 구성 요소: ITEM Click to change Vue를 사용하는 동안에는 DOM을 직접 조작하지 않도록 하십시오.이 ..

sourcecode 2022.08.09

vuex에서 vue 라이프사이클 후크에서 비동기/대기 기능을 사용하는 방법

vuex에서 vue 라이프사이클 후크에서 비동기/대기 기능을 사용하는 방법 mounted() 라이프 사이클 훅의 App.vue 컴포넌트에서 액션을 디스패치하면 다른 컴포넌트가 로드된 후에 실행됩니다.액션과 마운트된 라이프 사이클 훅에 비동기/대기 기능을 사용하고 있습니다. App.vue 파일 methods: { ...mapActions({ setUsers: "setUsers", }), }, async mounted() { try { await this.setUsers(); } catch (error) { if (error) { console.log(error); } } }, action.filename 파일: async setUsers(context) { try { const response = awai..

sourcecode 2022.08.09

vuex를 사용하여 Axi에서 기사 ID 가져오기

vuex를 사용하여 Axi에서 기사 ID 가져오기 아티클의 ID에 접속하여 가져오려고 합니다.하지만 어딘가에서 나는 실수를 한다.vuex가 빈 개체를 반환하고 라우터 링크가 실패하기 때문입니다. 지금까지 제가 만든 건 다음과 같은 거. state: { article: {}, }, getters: { bringArticle(state){ return state.article; } }, mutations: { updateArticle(state, article){ state.article = article; } }, actions: { getArticle(context, id){ axios.get("/api/articles/" + id) .then((response) => { context.commit("u..

sourcecode 2022.08.09

첫 번째 밀리초 동안의 콘텐츠 점프

첫 번째 밀리초 동안의 콘텐츠 점프 Nuxt를 사용하여 동적 페이지를 만들고 있습니다.페이지 폴더에는 _url.vue 파일이 1개 있습니다.다음 코드가 포함되어 있습니다. div component( v-for="component in components" :key="`${component.type}-${component.id}`" :is="`the-${component.type}`" ) set Components는 미들웨어 수준에서 발생합니다. export default async function ({ store }) { await store.dispatch('app/setPage') } 페이지 로드의 첫 번째 밀리초 동안 구성요소가 즉시 렌더링될 때 컨텐츠가 "점프"됩니다.어떻게 하면 이 상황을 해결할..

sourcecode 2022.08.09

vuex 계산 속성이 무효가 아님

vuex 계산 속성이 무효가 아님 test.vue, vue 구성 요소에서 'test' 속성은 반응하지만 vuex 저장소의 'title' 속성은 반응하지 않습니다.비슷한 질문을 몇 개 찾았는데 해결 방법이 안 맞네요. 제가 여기서 뭘 잘못했나요? 템플릿 {{test}} {{title}} js data() { test: 'test' }, computed: { ...mapGetters(['article']), title: { get () { return this.article.title || '' }, set (value) { this.$store.commit(Types.UPDATE_TITLE, value) } } } store.displaces를 설정합니다. import * as Types from '../..

sourcecode 2022.08.08

VuexFire 돌연변이

VuexFire 돌연변이 Vuex Fire Vuex v2를 사용해 본 적이 있는 유저에게 최적.뭐가mutations: VuexFire.mutations여기 말하는 거야?답은 뻔할 수 있지만 무슨 뜻인지 모르겠다.그럼 내 실제 돌연변이는 어디로 가는 거지?현재 Vuex v1을 사용하고 있는데 정상적으로 동작하고 있는 것 같습니다만, Vuex v2를 사용하고 있는 것으로 업그레이드 하고 싶습니다.감사합니다! var store = new Vuex.Store({ state: { items: null }, mutations: VuexFire.mutations, // What is this and where is it coming from?? getters: { items: function (state) { ret..

sourcecode 2022.08.08

Vuex 배열에서 항목 제거

Vuex 배열에서 항목 제거 Vuex를 사용하기 시작한 지 얼마 되지 않았지만 문제가 있습니다(이것은 제 입장에서 알 수 없는 구문 오류일 수 있습니다).liked_items를 가진 사용자가 있으며 아이템과 다른 네트워크 콜이 있습니다. mutations: { SET_TOGGLE_LIKED: (state, { global_id }) => { alert('here is global_id: ' + global_id) state.user.liked_items.find((obj,i) => { if(obj.global_id === global_id){ // no global_id console.log('that exists at i: ' + i + ' with length: ' + state.user.liked_..

sourcecode 2022.08.08

Vue Vuex: 계산된 속성이 변경되기 전에 오래된 데이터가 일정 기간 유지됩니다.

Vue Vuex: 계산된 속성이 변경되기 전에 오래된 데이터가 일정 기간 유지됩니다. 처음입니다vuex아직도 너무 많이 쓰고 있어요.예를 들어, 나는product내 목록store상태. 내가 봤을 때)product나는 만든다axios그것과 함께 전화하다product.id제품 데이터를 커밋하여currentProduct다른 제품을 보면, 그 페이지는 다음과 같이 렌더링 됩니다.currentProduct먼저 이전 데이터를 기술한 다음, 다음 데이터를 기술합니다.action commits그런 다음 새로 가져온 항목으로 업데이트됩니다.currentProductvue가 내 뷰 데이터를 새 데이터로 변경합니다.그user오래된 데이터가 새로운 데이터로 대체되는 것을 명확하게 알 수 있습니다.그러나 새로운 데이터가 커밋된..

sourcecode 2022.08.08

오브젝트를 사용합니다.freeze 및 object.freeze는 테이블 데이터 행이 많은 리액티브페이지에서 메모리 증대를 줄이기 위해 사용합니다.

오브젝트를 사용합니다.freeze 및 object.freeze는 테이블 데이터 행이 많은 리액티브페이지에서 메모리 증대를 줄이기 위해 사용합니다. 여기에 제시된 접근방식을 사용하여 많은 테이블/행 데이터가 있는 Vue.js 앱에서 메모리 증대를 줄이고 있습니다.특히 IE에서 메모리 증대가 발생하고 있습니다.예를 들어, 몇 개의 행이 있는 페이지는 페이지를 로드할 때 최대 100MB까지 점프할 수 있습니다. 행 데이터를 저장하는 목록/어레이에 들어가는 각 개체를 고정하면 블랫이 크게 감소한다는 것을 알 수 있습니다.100 MB -> 60 MB 여러 페이지에 많은 테이블 데이터가 있는 Vue.js 앱에서 메모리 증대를 줄이는 데 이것이 가장 좋은 솔루션입니까?프리즈가 발생하지 않으면 IE는 2~3페이지에 도..

sourcecode 2022.08.08

Axios가 vuex 작업에서 여러 매개 변수를 사용하여 요청을 게시함

Axios가 vuex 작업에서 여러 매개 변수를 사용하여 요청을 게시함 vuex 작업에서 악시를 사용하여 API 데이터를 가져오는 중: actions: { login ({commit}, payload) { axios.post(globalConfig.TOKEN_URL, { payload }) .then((resp) => { commit('auth_success', resp.data) }) .catch((err) => { console.log(err) }) }, } 구성 요소의 데이터 전송 방법: methods: { authChatClient () { let payload = { name: this.clientFio, number: this.clientNumber } this.$store.dispatch('..

sourcecode 2022.08.08
반응형