Laavel 8에서 Inertia+Vuetify에게 vue-cookies에 도전... - Laavel JetStream- 해보세요.

개시하다

날과 씨

Laavel8에서 Inertia+Vuetify를 사용하여 템플릿 대응의 후속으로 Inertia+Vue+Vue+Vuetify로 레이아웃으로 구성된 기세를 조합하여 vue-cookies를 테스트했다.
Inertia+Vue에서 클라이언트의 상태를 관리하기 위해 Vuex를 사용하지 않고 vue-cookies를 사용해 보십시오.

구현 내용

마지막으로 생성한 레이아웃 구성을 약간 수정합니다.http://localhost/app02/data-tables의 메뉴 사용<v-navigation-drawers>, 마우스가 멈출 때까지 접은 상태 표시expand-on-hover를 켰다.
이 접힌 상태의 전환을 쿠키를 활용해 마우스가 지나친 게 아니라 클릭으로 하고 화면이 옮겨진 뒤에도 그 상태를 유지하려고 한다.
쿠키를 Vue로 간단하게 처리할 수 있도록 vue-cookies를 활용한다.

쿠키 없는 UI 변경

어렵게 이룬 콘텐츠는 일단 UI만 바꾸고 컨디션 관리를 하지 않으면 어떤 행동으로 바뀔까.
※ 편집할 때마다 세팅이 필요합니다.사전 실행npm run watch을 잊지 마십시오.

1. 메뉴 수정

data () {}마다 메뉴의 개폐 상태를 저장하는 속성을 추가합니다.(나중에 삭제됨)
resources/js/Commons/Drawer.vue

drawer: true,
↓
drawer: true,
miniDrawer: true,

<v-navigation-drawer>의 expand-on-hover는 다음과 같이 변경되었다.
resources/js/Commons/Drawer.vue

expand-on-hover
↓
:mini-variant="miniDrawer"

메뉴의 개폐용 UI를 설정하기 위해 시작 부분<v-list-item>에 다시 씁니다.
resources/js/Commons/Drawer.vue

<v-list-item class="px-3">
  <v-list-item-avatar size="32" color="grey"></v-list-item-avatar>
  <v-list-item-title class="title">メニュー</v-list-item-title>
</v-list-item>
↓
<v-list-item class="px-3">
  <v-list-item-avatar size="32" color="grey"
      class="cursor-pointer" @click="miniDrawer = !miniDrawer">
  </v-list-item-avatar>
  <v-list-item-title class="title">メニュー</v-list-item-title>
  <v-spacer/>
  <v-btn icon @click="miniDrawer = true">
    <v-icon>mdi-chevron-left</v-icon>
  </v-btn>
</v-list-item>

UI 관련 변경 사항은 이것뿐입니다.

2. 동작 확인

방문http://localhost/app02/data-tables 확인 동작.expand-on-hover가 삭제되어 축소 메뉴를 건너뛴 경우에도 메뉴를 열 수 없습니다.
대신 :mini-variant="miniDrawer" 정도의 변경에 따라 메뉴 왼쪽 위의<v-list-item-avatar>를 클릭하면 메뉴가 열리고 닫힌다.
그런 다음 메뉴를 연 상태에서 Welcome을 클릭하여 화면을 변환해 봅니다.
그러면 화면이 이동된 메뉴는 닫힌 상태로 바뀝니다.
화면이 이동할 때 화면의 상태도 초기화되기 때문에 메뉴가 닫힌 상태입니다.
이 스위치 상태의 화면이 이동해도 유지되는 구조를 vue-cookies로 조합해 보고 싶다면 그렇다.

vue-cookies 가져오기

우선, vue-cookies를 가져옵니다.
vue-cookies에 대해서는 여기.를 참조하십시오.

1. 패키지 설치

vue-cookies 패키지를 설치합니다.

laradock@8896705ba0d1:/var/www/example-app02$ npm install vue-cookies

실행 이미지

added 1 package, and audited 844 packages in 3s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2. 프로젝트용

편집app.js, 프로젝트에 vue-cookies를 편입합니다.
resources/js/app.js

：
import VueCookies from 'vue-cookies';
：
Vue.use(VueCookies);
：

※ 필요에 따라 Vue.$cookies.config()를 통해서도 설치할 수 있습니다.
이상은 도입입니다.

쿠키를 관리하는 믹스린을 제작하고 포함

몇 가지 방법으로 실시해 보았지만, 이번 상황에서 믹스린리(상) 귀결 기능이 좋아 보이기 때문에 이 형식으로 만들었다.(쿠키가 저장한 정보가 다르면 다른 설치가 더 좋을 수 있음)
※ 믹수에 대해서는 여기. 참조.

1. 믹슈 파일 만들기

따라서 디렉터리resources/js/mixins를 만들고 파일 이름cookie-manager.js으로 혼합 인덱스를 만듭니다.니가 좋아하는 이름.
믹수 파일 내용이 이런 느낌으로 만들어졌어요.
resources/js/mixins/cookie-manager.js

export default {
  data: () => ({
    cookieManager: {
      miniDrawer: null
    }
  }),
  computed: {
    miniDrawer: {
      get () {
        if (this.cookieManager.miniDrawer === null) {
          return (this.$cookies.get('mini-drawer') === 'close')
        }
        return this.cookieManager.miniDrawer
      },
      set (value) {
        this.$set(this.cookieManager, 'miniDrawer', value)
        this.$cookies.set('mini-drawer', (value ? 'close' : 'open'), Infinity)
      }
    }
  }
}

2. 메뉴에 포함

메뉴에 생성된 믹서를 삽입합니다.
우선 cookie-manager.js를 import으로 한다.
resources/js/Commons/Drawer.vue

<script>
↓
<script>
import cookieManager from '@/mixins/cookie-manager'

data () {}마다 추가된 미니 드래거를 삭제합니다.
resources/js/Commons/Drawer.vue

miniDrawer: true,

mixins 정의를 추가하고 import Mike Sne을 적용합니다.
resources/js/Commons/Drawer.vue

export default {
↓
export default {
  mixins: [cookieManager],

참조: 변경된 Drawer.vue
resources/js/Commons/Drawer.vue

<template>
  <v-navigation-drawer
      id="commons-drawer"
      v-model="drawer"
      :mini-variant="miniDrawer"
      permanent
      app>
    <v-layout column>
      <v-list-item class="px-3">
        <v-list-item-avatar size="32" color="grey"
          class="cursor-pointer" @click="miniDrawer = !miniDrawer">
        </v-list-item-avatar>
        <v-list-item-title class="title">メニュー</v-list-item-title>
        <v-spacer/>
        <v-btn icon @click="miniDrawer = true">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider/>

      <template v-for="(link, index) in links">
        <inertia-link :key="index" :href="route(link.name)" as="v-list-item">
          <v-list-item-action>
            <v-icon>{{ link.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="link.title" />
          </v-list-item-content>
        </inertia-link>
      </template>

    </v-layout>
  </v-navigation-drawer>
</template>

<script>
import cookieManager from '@/mixins/cookie-manager'

export default {
  mixins: [cookieManager],
  data () {
    return {
      drawer: true,
      links: [{
        name: 'welcome',
        icon: 'mdi-home',
        title: 'Welcome'
      }, {
        name: 'dashboard',
        icon: 'mdi-view-dashboard',
        title: 'Dashboard'
      }, {
        name: 'data-tables',
        icon: 'mdi-view-list',
        title: 'DataTables'
      }],
    }
  }
}
</script>

<style scoped>
</style>

동작 확인

다시 방문http://localhost/app02/data-tables 확인 동작.
메뉴를 연 상태에서 Welcome을 클릭하여 화면을 변환해 봅니다.
이번에도 화면 이동 후 메뉴 상태가 유지됐다.
화면이 이동할 때는 쿠키에서 메뉴 상태를 복원함으로써 메뉴 상태를 유지할 수 있다.

총결산

vue-cookies를 가져와 메뉴의 상태 관리를 진행했습니다.
처음으로 vue-cookies를 시도했지만, 실례적인 속성을 통해 쿠키를 처리할 수 있고, 쉽게 사용할 수 있는 포장이라는 인상(혹시 그런 것)을 사용했다.
인스턴스 속성으로 처리할 수 있지만 곳곳this.$cookies에 등장해도 상관없기 때문에 믹스린화가 됐다.이것은 메뉴의 상태 관리뿐만 아니라 다른 상태 관리도 구상했다.실용적이지 않기 때문에 더 많은 검증이 필요할 수도 있다.
이번 보도까지 Vuetify에 합류해 템플릿화를 시도하고 vue-cookies를 시도하면서 Inertia+Vue의 실현에 대한 인상이 떠올랐다.
익숙해지면 스파와의 차이에 크게 신경 쓰지 않고 이룰 수 있다.차라리 루트 설정을 중복 관리할 필요가 없고 프로퍼스를 통해 데이터를 전달하면 데이터를 직관적으로 처리할 수 있기 때문에 장점이 더 크다.
이렇게 생각하면 Vuetify를 넣지 않고 JetStream의 표준 구성 요소로 조합해도 괜찮다(register,confirm-password 등 준비된 화면을 바꾸는 것도 어렵기 때문이다).
아무튼 이번엔 여기까지.