Vue Composition API로 Vuex 구현!【NoVue】

안녕하세요.shundroid입니다.Zenn을 처음 씁니다.
대학 수업을 시작한 지 벌써 일주일이 되었다.
처음에는 모두 지도를 하면서 대학 과정의 흥미로운 점을 점점 알게 되었다.
그럼 이번에는 사용하고 싶습니다vue-composition-api.
이거 대단해.
아마도 최초의 동력은 비대화된 View 모델을 정리하는 것이었을 것이다
익숙한 watch 와 재활동을 생성하는 변수 reactive 등을 구성 요소에서 분리해서 사용할 수 있기 때문에 잠시 후에 상세하게 설명하겠습니다. 광범위하게 사용할 가능성이 있다고 생각합니다.
특히, 나는 이것이 데이터를 이용하여 귀속되는 구조를 설계하였으며, 원형을 제작하기에도 적합하다고 생각한다
여기서 vue-composion-api로 Vuex를 해보고 싶어요!

Composition API의 기본 기능

자세한 내용은 Vue입니다.js의 공식 문서는 이해하기 쉬워요. API를 만든 배경도 알 수 있어요. 저쪽을 보세요.
https://v3.ja.vuejs.org/guide/composition-api-introduction.html
이번에 특별히 사용한 기능을 소개합니다.

ref

현재 변수를 생성합니다.비슷한 것은reactive이 있지만 이 값은 대상에 사용할 수 있고 생략할 수 있다.value.
코드에 대한 설명은 Type Script를 따릅니다.

import { ref, Ref } from '@vue/composition-api';
// (予めVueにComposition APIを登録する必要はある:後のstore.ts参照)

// どういう型になるか説明するために、型指定を行っておきます。
const num1: Ref<number> = ref(0);
const num2 = num1;

console.log(num1.value, num2.value); // 0, 0
num2.value++;
console.log(num1.value, num2.value); // 1, 1

그렇다면 참고치를 제출했을 뿐입니다. 예를 들어 이것도 괜찮다고 생각할 수 있습니다.

const num1 = { value: 0 };
const num2 = num1;

이지만 ref의 장점은 Vue의 편리한 재활동 시스템이 사용할 만한 모든 것을 사용할 수 있다는 것이다.watch,computed 등.다음은 이것을 설명하겠습니다.

watch

베일에 익숙한 것과 같다.

import { ref, watch, Ref } from '@vue/composition-api';

const num = ref(0);

watch(num, () => {
  console.log('changed!');
});

num.value--; // changed!

이런 기구를 간단하게 설계할 수 있다.
Vue의 구성 요소 시스템보다 더 가능성이 높은 것 같습니다.

추가:computed

이번에는 사용하지 않아computed도 간단하게 사용할 수 있다.

import { ref, computed, Ref } from '@vue/composition-api';

const num1 = ref(0);
const num2 = computed(() => num1.value + 1);

console.log(num1.value, num2.value); // 0, 1
num1.value++;
console.log(num1.value, num2.value); // 1, 2

대단하다.
이런 프로그램이 보급되면 위에서 프로그램이 실행된다는 설명이 어려워지겠죠.
물론 틀리지는 않았지만, 이렇게 컴퓨터 내의 호출이 실행되는 순서대로 기다린다면 다른 뜻을 더하는 것이 더 적절하지 않을까 싶습니다.
프로그래밍 언어의 명령형 → 선언형으로 넘어가는 것을 엿볼 수 있을 것 같다.
개인은 데이터 흐름 프로그래밍에 흥미가 있다 그래서 나는 이 절차에 찬성한다.
컴퓨터가 내부에서 호출의 실행 시기를 어떻게 식별하는지에 대해 아래의 보도는 이해하기 쉽다.일단 내용을 실행하면 어떤 활성화 변수를 얻었는지 기록되어 있는 것 같다.
https://qiita.com/neutron63zf/items/506c7493a53cea44860e
만약 조건이 엇갈려 컴퓨터 안에서 기다린다면 한 번만 실행하는 것은 충분하지 않을 것 같지만 조건 자체가 아무리 적극적이라면 이 정도면 충분하다.잘했다.

No로 Vuex 구현하기

이제 Composition API의 기본 기능을 살펴보겠습니다.
Vue의 구성 요소뿐만 아니라 더욱 일반적인 용도도 있다.
따라서 실제 응용의 예로 Vuex의 구조를 실시해 보자.

이번에 Todo 앱을 만들 거예요.
본질적이지 않은 부분은 접어야 한다.
미안해, 액션, 안녕.
그리고 액션 호출은 희소한 결합에서 이루어졌지만 별로 좋은 점이 없었기 때문에 이번에는 Mutation 직명으로 대체했다.

store.ts 설치

/store.ts

import Vue from 'vue';
import VueCompositionAPI, { DeepReadonly, reactive, readonly, ref, Ref, UnwrapRef } from '@vue/composition-api';
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>;
Vue.use(VueCompositionAPI);

interface TodoItem {
  title: string;
  completed: boolean;
}

interface State {
  todoList: Ref<TodoItem[]>;
}

const state: State = {
  todoList: ref([])
};

// mutations
export function addTodo(title: string) {
  state.todoList.value.push({ title, completed: false })
}

const readonlyState: { [P in keyof State]: DeepReadonly<UnwrapNestedRefs<State[P]>> } = {
  todoList: readonly(state.todoList)
}
export default readonlyState;

Composition API를 사용하려면 Vue를 호출해야 합니다.
애플리케이션에서 Vue를 사용하는 것은 아닙니다.
state의 정의 사용 ref.이것은 방금 소개한 바와 같다.
사실 모델 부분은 뷰의 영향을 받지 않고 순수한 모델이어야 하는데 다시 활성화만 하면 될 것 같아요.어때?
이 밖에 reactive([])에서는 그룹이 활성화되지 않습니다.주의하십시오.
mutation은 일반적으로 state를 다시 쓴다.
그리고 여기는 간이에요.
export state에서 state를readonly로 바꿉니다!!!!
실제로 라이브러리의 Vuex state에는 양방향 데이터 바인딩이 있습니다.
Mutation 없이 바인딩에 따라 state 가 변경됨
이것은 아무리 생각해도 bad입니다. 이번에는 Composition API의 기능을 충분히 활용했습니다.
나는 레돈리.
readonlyState 유형이지만 Composition API 내부에서 사용되는 유형을 대여했습니다.[P in keyof Type]는 Mapped Types라는 Type Script의 기능입니다.반복 처리된 유형 버전과 유사하다.
DeepReadonly에서는 T extends U ? A : B 이 유형의 조건부 분기를 사용한 것 같습니다. (참조: API 내부)
왜 이렇게 짜야 합니까? 왜냐하면 이렇게 하면readonly State의 값을 보장할 수 있기 때문입니다.
즉, 분명히 state에readonly State가 없다는 것이다!이런 거,readonly가 되지 않았어!이렇게 하면 Type Script의 오류로 파악할 수 있습니다.
이렇게 스타일링만 있으면 즐거워요!신난다!뿐만 아니라 개발상의 오류가 발생하지 않도록 틀을 사용해야 한다.이 용법용never형 등은 자주 사용한다.

개별 구성 요소의 실현

우선 인터페이스 설치입니다.
/components/component.ts

export default interface Component {
  render(): HTMLElement
}

토도 추가된 거.
/components/todoList.ts

import Component from './component';
import state from '../store';
import { watch } from '@vue/composition-api';

export default class TodoList implements Component {
  render() {
    const ul = document.createElement('ul');
    watch(state.todoList, () => {
      ul.innerHTML = '';
      for (let todoItem of state.todoList.value) {
        const li = document.createElement('li');
        li.textContent = `${todoItem.title}`
        ul.appendChild(li)
      }
    });
    return ul;
  }
}

분명히 Vuex인데textContentent,document 등 식물이 나타났다
이번에는 Composition API의 공통성을 설명하고자 합니다.
바닐라도 쓸모가 있어!나는 이 점을 설명하고 싶어서 이렇게 한다.
물론 Vue로 구현할 수도 있습니다.
여기state.todoList입니다.
DOM을 직접 틀어서는 더 이상 활약할 수 없기 때문에 어쩔 수 없다.
또한 확인해 보시면 다행입니다. watch 완전readonly이기 때문에 View에서 변경할 수 없습니다.와아
그럼 뷰에서 state를 어떻게 바꿀까요?이것은 다음 구성 요소입니다.
/components/addTodo.ts

import Component from './component';
import { addTodo } from '../store';

export default class AddTodo implements Component {
  render() {
    const parent = document.createElement('div');
    const input = document.createElement('input');
    input.type = 'text';
    parent.appendChild(input);
    const button = document.createElement('button');
    button.textContent = 'Add a task';
    button.addEventListener('click', () => {
      addTodo(input.value);
      input.value = '';
    });
    parent.appendChild(button);
    return parent;
  }
}

mutation을 사용합니다.

신청 요점

여기는 그다지 중요하지 않지만, 나는 구성 요소를 등록하려고 한다.
/main.ts

import AddTodo from './components/addTodo';
import TodoList from './components/todoList';

const app = document.querySelector('#app');
app.appendChild(new AddTodo().render());
app.appendChild(new TodoList().render());

완전히 베일을 숨기고 있어서 기분이 좋네요.

다 된 건 이쪽이야.

냉장고 안에서 3시간 동안 냉동된 물건은 Giithub에 있다.
https://github.com/shundroid/vuex-no-vue-sample/
Vite를 사용하여 실현되었습니다.
빠르네.지금 바람이 참 좋네요.홈페이지도 얼마 안 남았으니까 퇴직해야겠지.
시위 행진은 여기.에서 할 수 있다.

총결산

어때?Composition API의 공통성을 전달할 수 있다면 매우 좋습니다.
개인은 구조의 실현 등에 대해 흥미를 가지고 있다
데이터로 연결된 구조의 원형 제작 등에서 끊임없이 사용하고 싶습니다.
※ 이 글은 이식내 블로그이 썼습니다.