Vue 3: Vuex 또는 Vuex 미만
저는 최근에 Vue3를 깊이 연구하고 있습니다.많은 사람들이 Vue의 합성 API에서 Vuex를 사용할지 여부를 토론하는 것 같다.그중의 몇 가지 옵션을 보고 원형을 만든 후에 저는 여러분과 제 의견을 공유하고 싶습니다.이 글에서 나는 서로 다른 전략 (Vuex 포함) 을 되돌아보고 모든 전략의 장단점을 토론할 것이다.
베이스라인
간단한 Vue 응용 프로그램에서 시작하여 Vue CLI의 새 버전입니다.Vue 3을 통해 Vuex 및 라우터를 사용합니다.이 프로젝트를 플레이하려면 Github에서 다음을 찾을 수 있습니다.
URL에서 데이터를 읽을 수 있는 간단한 코드를 만드는 것이 목표입니다. (무료 RestCountries API 사용) 데이터를 되돌려주는 로컬 복사본을 삭제할 수 있습니다.나는 이 기능을 세 가지 방식으로 실현할 것이다. (간단한 공장으로서 공유 구성 요소로서 마지막은 Vuex에서 그 장단점을 토론할 것이다.)
왜 안 섞지?
우리가 시작하기 전에 나는 왜 직접 혼합기를 사용하지 않습니까?가장 큰 이유는 Vue 3에서 혼합이 지원되지 않거나 합성 API에 더 적합하기 때문입니다.그럴 필요가 없기 때문이다.작성 API의 주요 목표는 작성 어셈블리를 허용하는 것입니다.혼혈은 이런 구도를 허용하는 필수 조건이다.
왜 섞어야 돼요?이것은 모두 이 바늘에 관한 마력이다.옵션 API(Vue 2의 기본값)에서 모든 것이 정상입니다. 왜냐하면 Vue의 일부 마력은 데이터와 API의 다른 부분을 신기한 바늘에 전달하기 때문입니다.예:
export default {
data: () => {
return {
moniker: ""
};
},
methods: {
setCampFromMoniker() {...},
onCampChange() {
this.setCampFromMoniker(this.moniker);
}
}
};
export default {
mixins: [myMixIn],
data: () => {
return {
moniker: ""
};
},
methods: {
setCampFromMoniker() {...},
onCampChange() {
this.setCampFromMoniker(this.moniker, this.someDataFromMixin);
}
}
};
export default {
setup() {
// Introduce a local variable
const name = ref("Shawn");
function save () {
// Can use the locally scoped variable as it becomes a closure
alert(`Name: ${name.value}`);
};
return {
name,
save
};
},
};
공장.
나는 공장이 기능을 구성하는 흔한 모델이라고 생각한다.다음은 간단한 예입니다.
// Factory Pattern
import axios from "axios";
import { ref } from "vue";
export default function () {
const countries = ref([]);
async function load() {
let result = await axios.get("https://restcountries.eu/rest/v2/all");
countries.value.splice(0, countries.value.length, ...result.data);
}
function removeItem(item) {
let index = countries.value.indexOf(item);
if (index > -1) {
countries.value.splice(index, 1);
}
}
return {
countries,
load,
removeItem
};
}
// Inside Component
import dataFactory from "../factories/data";
import { onMounted, computed } from "vue";
export default {
setup() {
let { load, removeItem, countries } = dataFactory();
onMounted(async () => await load());
return {
countries,
removeItem
};
},
};
공장은 위대하지만, 모든 상황에서, 그것들은 새로운 실례를 만들어 낼 것이다.이것은 당신이 원하는 것일 수도 있지만, 크로스 보기로 데이터를 공유하는 것은 매우 번거로울 수도 있습니다.코드를 얻고 실행하면 Factory Component의 두 가지 단독 사례를 사용하면 데이터를 공유하지 않습니다.
인스턴스 공유
또 다른 선택은 코드를 공유해야 할 때 공유 실례를 사용하는 것이다.예:
// Shared
import axios from "axios";
import { ref } from "vue";
export let countries = ref([]);
export async function load() {
if (countries.value.length === 0) {
let result = await axios.get("https://restcountries.eu/rest/v2/all");
countries.value.splice(0, countries.value.length, ...result.data);
}
};
export function removeItem(item) {
let index = countries.value.indexOf(item);
if (index > -1) {
countries.value.splice(index, 1);
}
}
export default {
countries,
load,
removeItem
};
// Shared
import { load, removeItem, countries } from "../shared/data";
import { onMounted } from "vue";
export default {
setup() {
onMounted(async () => await load());
return {
countries,
removeItem
};
},
};
Vuex 회사
문제는 Vuex가 몇 가지 서비스를 제공했다는 것이다...녀석들이 필요할지도 몰라.사실, 나는 Vuex를 전문적으로 사용하여 상태의 모든 변화(예를 들어 돌연변이)가 고의로 발생한 것을 확보한다.Vuex를 위해 엄격한 능력을 사용하는 것이 공유 상태의 관건입니다.
Vue에서 간단한 응용 프로그램을 만들 때 Vuex가 과도하게 사용될 수 있습니다.예를 들어, 매우 간단한 예제에서 Vuex는 다음과 같습니다.
import { createStore } from 'vuex'
import axios from "axios";
export default createStore({
state: {
countries: []
},
mutations: {
setCountries: (state, items) => state.countries.splice(0, state.countries.length, ...items),
removeItem: (state, item) => {
let index = state.countries.indexOf(item);
if (index > -1) {
state.countries.splice(index, 1);
}
},
},
actions: {
load: async ({commit}) => {
let result = await axios.get("https://restcountries.eu/rest/v2/all")
commit("setCountries", result.data);
}
}
})
import store from "../store";
import { onMounted, computed } from "vue";
export default {
setup() {
const countries = computed(() => store.state.countries);
onMounted(() => store.dispatch("load"));
const removeItem = (item) => store.commit("removeItem", item);
return {
countries,
removeItem
};
},
};
만약 네가 여기서 나의 논리를 폭로할 수 있다면, 어서 오세요.만약 내가 틀렸다면, 나는 매우 기쁠 것이다.
This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).
Based on a work at [wildermuth.com](http://wildermuth.com).
Reference
이 문제에 관하여(Vue 3: Vuex 또는 Vuex 미만), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shawnwildermuth/vue-3-to-vuex-or-not-to-vuex-237l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
