Как в Vue3 создать глобальную переменную?
Берешь и создаешь. Это не Vue 2.
Или ты не используешь Composition API и script setup?
Объявил что надо в обычных .js файлах, потом используешь это в любых .vue компонентах, нужно лишь заимпортировать.
Собственно лайф демо:
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbX...
main.js
import {computed, ref} from "vue";
export const todos = ref([]);
export const activeTodos = computed(() => {
return todos.value.filter(todo => !todo.done);
});
let id = 0;
export function addTodo(name, done = false) {
todos.value.push({name, done, id: id++});
};
export function removeTodo(todo) {
todos.value = todos.value.filter(_todo => _todo.id !== todo.value.id);
};
export function toggleTodo(todo) {
todo.value.done = !todo.value.done;
};
export function clearTodos() {
todos.value = [];
};
App.vue
<script setup>
import {computed, ref, onMounted} from "vue";
import Todo from "./Todo.vue";
import {todos, activeTodos, clearTodos, addTodo} from "./main.js";
const showAll = ref(true);
const selectedTodos = computed(() => {
return showAll.value ? todos.value : activeTodos.value;
});
function onEnter(event) {
addTodo(event.currentTarget.value);
event.currentTarget.value = "";
}
onMounted(() => {
addTodo("Task 01", true);
addTodo("Task 02");
addTodo("Task 03");
});
</script>
Todo.vue
<script setup>
import {toRefs} from "vue";
import {toggleTodo, removeTodo} from "./main.js";
const props = defineProps(["todo"]);
const {todo} = toRefs(props);
function onClick() {
toggleTodo(todo);
}
function onRightClick() {
removeTodo(todo);
}
</script>