goodsource

대규모 SPA에서 우수한 VueX 스토어 디자인을 사용하는 방법 저는 VueJ에 대해 잘 알고 있으며 VueX 사용에 대해서도 잘 알고 있습니다.저는 VueJs 프로젝트를 몇 개 진행하고 있습니다만, 점포 설립에 어려움을 겪고 있습니다. 몇 가지 질문이 있습니다. 모듈을 분할하려면 어떻게 해야 하나요?웹 어플리케이션의 자원(프로젝트, 기사 등) 단위 또는 '페이지/컨테이너' 단위? 저장소의 내용(및 지속성)은 무엇입니까?UI 상태, 데이터 또는 둘 다? 모듈, 게터, 액션 및 돌연변이에 적절한 이름을 사용하는 방법 확실히 하기 위해서:Vue와 VueX의 구문과 사용법을 알고 있습니다.질문은 VueX와 그 스토어의 구조/아키텍처에 초점을 맞추고 있습니다. 이 문제를 해결하기 위해 조건이나 좋은 비디오/게시..

기능에서 vuex 작업을 사용하는 방법 저는 Vue에 처음 와서 뭔가 오해하고 있는 것 같아요.로컬 함수 내의 vuex 액션을 호출합니다.App.vue다음과 같이 합니다. Test 이 액션은 에 변이를 호출한다.store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { IDs: [] }, mutations: { doAction: (state, id) => { state.IDs.push(id) } }, actions: { doAction: ({ commit }, id) => { commit('doAction', id) } } }) vue를 설정하는 main.js도 있습..

pwa가 db가 아닌 api 캐시를 고려하는 것이 잘못되었습니까? 나는 특정한 독서기 같은 앱을 만들고 있다. 메인 페이지 call api/books 다음과 같은 각 책 정보가 포함된 json 배열 목록 및 수신 [ { id: server_db_id, title: "title test", sum: 10 , date: ... } ] 요청 후 캐시되므로 도서 목록을 indexedDB, localStorage 또는 기타 스토리지에 저장하지 않습니다.특정 책이 하나 필요하시면 API 북 리스트를 다시 불러서 필터링만 하면 됩니다.그거 나쁜 디자인인가요?(200개 이상 예약) 사용자가 책을 열었을 때, 이것은/api/book/book_id또한 캐시된 책이기도 합니다. 열린 책 응답은 책 줄의 json 목록입니다...

Vuex 액션을 적절하게 체인하여 콜 간에 상태를 올바르게 변환하려면 어떻게 해야 합니까? 나는 가지고 있다Vuex를 정의하는 어플리케이션의 스토어getters,actions그리고.mutations이제 한 동작은 API에 데이터를 요청하고 수신한 데이터를 상태를 조작하는 변환에 커밋합니다.이 특정 액션(이름 지정)initConfiguration)는 후속 액션을 실행하기 전에 스토어에 적용해야 하는 메타데이터 및 설정을 로드합니다.루트 컴포넌트에는 초기화 코드가 포함되어 있습니다.mountedlifetime-hook 기능은 다음과 같습니다. new Vue({ el: '#app', store, render: h => h(App), mounted() { store.dispatch('initConfigurati..

Vuex 모듈 게터 및 돌연변이에 액세스하는 방법 자작 스토어 오브젝트 대신 Vuex를 사용하려고 하는데 Vue.js의 다른 곳처럼 명확한 문서를 찾을 수 없습니다.'제품'이라고 불리는 Vuex 모듈이 있으며 자체 상태, 돌연변이, 게터 등이 있다고 가정해 보겠습니다.해당 모듈에서 '작동 데이터 클리어'라는 작업을 참조하려면 어떻게 해야 합니까?문서에서는 모듈 상태에 액세스하는 예를 보여 줍니다. store.state.a // -> moduleA's state 하지만 괴터, 돌연변이, 행동 등에 대해 볼 수 있는 건 아무것도 없어요수락된 답변과 더불어 답변에 누락된 getter에 대한 워크라운드를 제공하고자 합니다. 스토어 디버깅 어떤 경우에도 전화하실 수 있습니다.console.log(this.$sto..

Vue에서 프레젠테이션 데이터 관리(이벤트 크기 조정) Vue 프로젝트를 수행하고 있으며 Vuex를 사용하여 애플리케이션 상태를 관리하고 있습니다.앱 뷰를 Vue 컴포넌트로 여러 개의 작은 레이아웃으로 구분했습니다.예를 들어, 데이터 베이스에 대한 레이아웃이 있습니다.header그리고 떠다니는stats를 클릭합니다. 제가 커스텀 디렉티브를 작성했습니다.stats현재, 이것은 값을 설정하는 부트스트랩과 비슷하며, 페이지가 그 지점을 넘어 스크롤 할 때,affixCSS 클래스가 요소에 추가됩니다.이 값은 의 높이를 기반으로 합니다.header앱이 반응하기 때문에 헤더에서 이 값을 계산해 주셨으면 합니다.outerHeight소유물. 이 작업을 수행하는 방법은 몇 가지 생각할 수 있지만 Vue가 적절한 방법을 ..

$auth.get에 접속하는 방법서비스의 토큰('local')을 선택하십시오. nuxtjs.i는 EventService.js와 같은 서비스를 만들려고 합니다.EventService.js에서 Axios를 사용하여 데이터를 가져오고 싶은데 Authorization 헤더를 설정합니다.그러나 $auth.get에서 액세스 토큰을 가져올 수 없습니다.토큰('local').Authorization header를 모든 axios 요청으로 설정하고 싶지 않습니다.고마워요. import axios from 'axios' const apiClient = axios.create({ baseURL: `example.com`, headers: { Accept: 'application/json', 'Content-Type': 'a..

VueX 및 NuxtJ의 지속 상태s 브라우저의 데이터 상태를 유지하기 위해 vuex-http://https://github.com/robinvdvleuten/vuex-persistedstate)를 사용합니다. Adonuxt(NuxtJs와 Adonis의 혼재)를 사용하고 있습니다.JS) VueX 액션에서는 다음 액션이 있습니다. nuxtClientInit ({commit}) { // I want get here state auth saved by persistedstate package } 이 액션은 플러그인으로 호출됩니다. 로컬 스토리지js export default async (context) => { await context.store.dispatch('nuxtClientInit', context)..

Vue / Vuex : 입력 바인딩된 값이 업데이트되기 전에 트리거된 붙여넣기 이벤트 컴포넌트에 간단한 형식이 있습니다. Submit 그리고. var searchForm = { methods : { submitSearch() { store.dispatch('submitSearch') } }, computed : { objId: { get () { return ... }, set (id) { store.commit('objId', id) } } }, ... }; 입력 및 제출 시에는 잘 작동하지만 값을 붙여넣을 때는 잘 작동합니다.submitSearch직전에 호출됩니다.objId갱신되어 있지 않습니다.이 문제를 해결하기 위한 합의와 친근한 방법이 있습니까? 한 가지 방법은 로컬 변수를 갖는 것입니다.isP..

Vuetify로 이미 페이지 처리된 데이터 처리 백엔드/서버에 이미 데이터 페이지를 작성했습니다.의 문서를 검토했습니다.하지만 그곳에 있는 것들을 파악할 수 없었다.사용하고 있기 때문에vuex그리고 내 데이터가 저장될 것이다.state이제 어떻게 조합하면 좋을지. resident.js: export default { state : { residents: [], }, mutations: { set_residents (state, residents) { state.residents = residents }, }, getters: { allResidents (state) { return state.residents }, }, actions: { get_resident_list (context, page) { ..