Как установить api композиции для ступенчатой формы?
Я пытаюсь создать многоступенчатую форму с api композиции. В vue 2 я делал это так
email: {
get() {
return this.$store.state.email
},
set(value) {
this.$store.commit("setEmail", value)
}
},
Теперь у меня есть собственное хранилище, я передал это вычисляемое свойство своему компоненту stEmail: computed(() => state.email). Как я могу использовать это при настройке?
Я пытаюсь сделать что-то подобное, но у меня ничего не получается.
let setMail = computed(({
get() {
return stEmail;
},
set(val) {
stEmail.value = val;
}
}))
const state = reactive({
email: "",
})
export function useGlobal() {
return {
...toRefs(state),
number,
}
}
Или есть лучший способ делать многоэтапные формы?
Ответы 1
Вы можете сделать то же самое с Composition API. Импортируйте useStore из пакета vuex и computed из vue:
import { computed } from 'vue';
import { useStore } from 'vuex';
А затем используйте его в своей функции setup() следующим образом:
setup: () => {
const store = useStore();
const email = computed(() => ({
get() {
return store.state.email;
},
set(value) {
store.commit("setEmail", value);
}
});
return { email };
}
Если вы хотите избежать использования vuex, вы можете просто определить переменные с помощью ref() и экспортировать их в обычный файл JavaScript. Это сделает ваше состояние повторно используемым в нескольких файлах.
state.js
export const email = ref('initial@value');
Form1.vue / Form2.vue
<template>
<input v-model = "email" />
</template>
<script>
import { email } from './state';
export default {
setup() {
return { email };
}
};
</script>
Потому что я не использую vue 2, и все говорят, что vuex ужасен для api композиции, потому что comp api позволяет создавать собственные компоненты.
Я добавил пример с общим локальным состоянием без использования vuex.
Вот и все? для этого требуется только v-модель? Состояние не исчезнет, когда я перейду на следующую страницу?
Что такое
useGlobalи почему вы создаете собственное решение, когда естьvuex?