Vue 3에 대한 간단한 전역 상태 관리 작성
상태 논리를 포함할
useTodos
후크를 작성하여 시작할 수 있습니다.// store/todos.js
import { reactive, toRefs } from "vue";
const url = 'https://jsonplaceholder.typicode.com/todos';
const state = reactive({
todos: [],
loading: true,
selectedTodo: null
});
export default function useTodos() {
const fetchTodos = async () => {
state.loading = true;
state.todos = await (await fetch(url)).json();
state.loading = false;
}
return {
...toRefs(state), // convert to refs when returning
fetchTodos
}
}
위 코드에서 초점 영역은
reactive
및 toRefs
속성입니다.문서의
reactive
속성은 개체를 가져와 원본의 반응 프록시를 반환합니다. 이것은 2.xVue.observable()
와 동일합니다.toRefs
속성은 reactive
객체를 일반 객체로 변환하고 소비하는 구성 요소가 반응성을 잃지 않고 구성 함수( useTodos
)에서 반환된 객체를 분해/확산할 수 있도록 합니다.다음으로 소비 구성 요소
App.vue
로 이동하여 구성 기능을 가져올 수 있습니다.앱뷰
<template>
<h1 v-if="loading">Loading...</h1>
<div v-else>
<SelectedTodo />
<ul>
<li v-for="t in todos" :key="t.id" @click="selectedTodo = t">{{t.title}}</li>
</ul>
</div>
</template>
<script>
import { onMounted } from "vue";
import useTodos from "./store/todos";
import SelectedTodo from "./components/SelectedTodo.vue";
export default {
name: "App",
components: { SelectedTodo },
setup() {
const { todos, fetchTodos, selectedTodo, loading } = useTodos();
onMounted(() => {
fetchTodos();
});
return {
todos,
selectedTodo,
loading,
};
},
};
</script>
SelectedTodo.vue
<template>
<pre>
{{ JSON.stringify(selectedTodo, undefined, 4) }}
</pre>
</template>
<script>
import useTodos from "../store/todos";
export default {
setup() {
const { selectedTodo } = useTodos();
return {
selectedTodo,
};
},
};
</script>
App.vue
에 작성한 내용을 분석해 보겠습니다.먼저 구성 함수를 가져와서 구조화하고 반환하여 나머지 구성 요소에서 사용할 수 있도록 했습니다.
onMounted
수명 주기 메서드는 할 일을 가져오는 데 사용되었으며 결과를 순서 없는 목록에 표시합니다. 각 항목은 클릭할 수 있으며 selectedTodo
상태 값을 선택한 항목으로 설정합니다.마지막으로
SelectedTodo.vue
속성이 반응적임을 보여주기 위해 selectedTodo
구성 요소를 만들었습니다.아마도 여기서 가장 흥미로운 부분은 우리가 다른 구성 요소에서 후크를 재사용할 수 있고 우리 상태의 모든 업데이트를 얻을 수 있다는 것입니다.
읽어 주셔서 감사합니다!
표지 사진 by @adigold1 on Unsplash
Reference
이 문제에 관하여(Vue 3에 대한 간단한 전역 상태 관리 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wobsoriano/write-a-simple-global-state-management-for-vue-3-4j77텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)