Vuexfire를 사용하여 어플리케이션 상태 관리 단순화

VuexFire가 해결하는 문제는 매우 간단합니다. 상태 데이터와Firebase Firestore 또는 RTDB의 데이터를 동기화합니다.만약 네가 Vue와 Vuex에 익숙하다면, 나는 네가 이전에도 이 문제를 겪은 적이 있다고 믿는다.업무 목록 같은 간단한 프로그램을 고려합시다.

사용자가 새로운 업무 항목을 만들 때마다 Vuex 작업은 백엔드에 요청을 보내고 응용 프로그램 상태를 업데이트하기 위해 변이를 제출합니다.

사용자가 업무 항목을 완성할 때 Vuex 작업은 백엔드에 요청을 보내고 다른 변이를 제출하여 상태 중의 특정한 업무 사항을 업데이트합니다.

사용자가 특정한 업무 항목을 삭제할 때 Vuex 작업은 백엔드에 다른 요청을 보내고 다른 변이를 제출하여 상태에서 특정한 업무 수행을 삭제합니다.

보시다시피 모든 사용자의 상호작용은 응용 프로그램과 백엔드의 데이터를 동기화하기 위해 Vuex 조작과 변이를 필요로 합니다.VuexFire는 응용 프로그램 상태를Firestore나 RTDB에 연결하고 상태를 자동으로 업데이트합니다. 변경 사항을 작성하거나 제출하지 않아도 됩니다.이것은 자신의 돌연변이를 제공함으로써 이 점을 실현한다. 이러한 돌연변이는 흔히 볼 수 있는 일들을 처리한다. 예를 들어 그룹에서 항목을 추가하거나 삭제하거나 대상을 업데이트하는 것이다.
내가 너에게 기본적인 예를 하나 보여 줄게.

I'm assuming we already have a Vue CLI project scaffolded with Vuex installed. You can find more info on how to do that here.

Vuexfire를 사용하여 데이터 검색

만약 우리가 서적을 관리하기 위해 프로그램을 개발하고 싶다면.내가 해야 할 첫 번째 일은 실행 중인 Vue 프로젝트 npm i firebase vuexfire 에Firebase와 Vuexfire 의존항을 설치하는 것이다.
그리고 Firebase를 만들었습니다.js 파일에서 프로젝트 키를 사용하여Firebase SDK를 설정하고 책이books라는 Firebase 집합에 저장되어 인용을 만들 것이라고 가정합니다.보아하니 이렇다.

// File src/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseApp = firebase.initializeApp({
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  databaseURL: process.env.VUE_APP_DATABASEURL,
  projectId: process.env.VUE_APP_PROJECTID,
  storageBucket: process.env.VUE_APP_STORAGEBUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGINGSENDERID,
  appId: process.env.VUE_APP_APPID,
})

const db = firebaseApp.firestore()
// collection reference
const booksCollection = db.collection('books')

// exports collection reference to use it in the Vuex Store
export { booksCollection }

Note: In this example I'm loading the Firebase keys from environment variables but you can load the values directly 😉

응용 프로그램 스토어에서 모든 책을 상태의 allBooks 속성에 저장하고 싶습니다. 따라서 이 책을 만들고 빈 그룹으로 초기화하기만 하면 됩니다.

// File src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // list of all books initialized empty
    allBooks: [],
  },
  actions: {},
  mutations: {},
  getters: {}
}

다음 작업은 상태의 allBooks 속성과Firestore 조회를 연결하는 Vuex 작업을 만드는 것입니다. 이 조회는 책 집합의 데이터를 되돌려줍니다.

// File src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

// imports collection reference from firebase.js file
import { booksCollection } from '@/firebase'
// imports required to bind the state to Firebase using Vuexfire
import { firestoreAction, vuexfireMutations } from 'vuexfire'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    allBooks: [],
  },
  actions: {
    /**
     * @param context deconstructed to get only the method to create the ref
     */
    bindBooks: firestoreAction(({ bindFirestoreRef }) => {
      // return the promise returned by `bindFirestoreRef`
      return bindFirestoreRef(
        'allBooks',
        booksCollection.orderBy('author', 'asc')
      )
    }),
  },
  mutations: {
    // adds Vuexfire built-in mutations
    ...vuexfireMutations,
  },
  getters: {
    allBooks: (state) => {
      return state.allBooks
    },
  },
})

보시다시피 액션 bindBooks는 제가 vuexfire에서 가져온 Firestore Action입니다.이 동작은 bindFirestoreRef () 로 해석된 약속을 되돌려줍니다. 이 약속은 두 가지 파라미터를 수신합니다. 데이터를 연결할 상태의 속성 (이 예는 allBooks), 그리고 데이터를 되돌려줄 조회 (이 예에서 저자가 주문한 모든 책) 입니다.
VuexFire 돌연변이도 가져왔고 destructuring 조작부호를 사용하여 돌연변이에 추가했습니다.마지막으로, 나는 간단한 Getter를 만들었는데, 이것은 상태에서 allBooks 목록을 되돌려줍니다. 나는 구성 요소에서 그것을 사용할 것입니다.
다음 단계는 모든 책을 표시할 구성 요소를 만드는 것입니다.매우 간단한 예는 다음과 같다.

// App.vue file

<template>
  <div id="app">
    <h1>My Book List app</h1>
    <div class="book" v-for="book in allBooks" :key="book.id">
      <h2>{{ book.title }}</h2>
      <p>Written by {{ book.author }}</p>
      <p>{{ book.summary }}</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'App',
  mounted() {
    this.$store.dispatch('bindBooks')
  },
  computed: {
    ...mapGetters(['allBooks']),
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.book {
  margin: 2rem;
  border-bottom: 1px solid gray;
}
</style>

보시다시피 마운트된lifecycle 갈고리에 상점에서 만든 동작을 할당했습니다.Firestore books 집합에서 데이터 목록을 가져오고 모든 책을 표시합니다.만약 FireBooks가 응용 프로그램 라이브러리에서 직접 너무 많은 코드를 추가하지 않았다면, 우리는 자동으로 FireBooks 응용 프로그램 라이브러리에서 이 코드를 삭제할 것입니다.

Vuexfire를 사용하여 Firestore 쓰기

지금까지 Vuexfire read를 사용하고 응용 프로그램 상태를Firestore와 자동으로 동기화하는 방법을 보여 드렸지만, 현실 세계의 응용 프로그램에서는 데이터베이스에서 문서를 만들고, 업데이트하거나 삭제해야 합니다.이러한 경우 Vuexfire는 어떠한 방법이나 도움말도 제공하지 않으며 as mentioned in the documentationFirebase JS SDK를 사용하는 것을 권장합니다.
모음에 책을 추가하고 삭제하는 두 가지 간단한 Vuex 작업은 다음과 같습니다.

// File: src/store/index.js

// .....
export default new Vuex.Store({
  state: {
    allBooks: [],
  },
  actions: {
    /**
     * @param context deconstructed to get only the method to create the ref
     */
    bindBooks: firestoreAction(({ bindFirestoreRef }) => {
      // return the promise returned by `bindFirestoreRef`
      return bindFirestoreRef(
        'allBooks',
        booksCollection.orderBy('author', 'asc')
      )
    }),
    addBook: firestoreAction((context, payload) => {
      console.log('Adding a new book!')
      return booksCollection.add(payload.newBook)
    }),
    deleteBook: firestoreAction((context, payload) => {
      console.log(`Deleting book ${payload.bookId}`)
      return booksCollection.doc(payload.bookId).delete()
    }),
  },
})

Note: we'd need to pass the payload for each action from the component. You can see the detailed code in this file of the repo

이러한 작업에서 Vuex에서 일반적으로 수행하는 것처럼 돌연변이가 발생하지 않았음을 주의하십시오.첫 번째 동작인 bindBooks는 응용 프로그램 상태를 Firestore와 동기화하는 것을 책임지기 때문입니다.따라서,dd () 또는 delete () 함수를 실제로 터치해야 하더라도,Vuexfire를 사용해도 리셋 상태를 걱정할 필요가 없습니다.
the following repo in GitHub 에서 본문의 모든 코드를 찾을 수 있습니다.

결론

보시다시피 Vuexfire는 Vue 응용 프로그램의 상태 관리를 간소화할 수 있는 아주 좋은 도구입니다.나는 이미 그것을 one of my latest projects에 집적했다. 그것은 내가 대량의 코드를 벗어날 수 있도록 도와주었다. 코드가 적을수록 발견할 수 있는 버그가 적다😅
물론 페이지 나누기 같은 한계도 있다.하지만 Stack Overflow에서 찾은 지도 덕분에 저는 간단한 페이지 코드를 작성할 수 있었습니다. 이것은 저에게 가능합니다.나는 다음 문장에서 여러분과 공유할 것이다.
만약 당신이 이 글을 좋아한다면, 당신은 이곳에서 나의 개발 기교, 재미있는 문장, 그리고 나의 프로젝트 진전에 대한 업데이트를 공유할 수 있습니다🤙
즐거운 코딩!
본고는 my blog 에서 최초로 발표되었으며, 노드 중심의 웹 개발에 관한 다른 글을 찾을 수 있습니다.js, Vue, Laravel 및 제품 개발과 관련된 모든 제품.