iNickolay
@iNickolay

Как в Vue3 создать глобальную переменную?

Здравствуйте!
Немного не понимаю как решить данную задачу:
Нужна такая переменная/функция, которая бы была доступна в любом компоненте.

То есть я получил текущего пользователя, и хочу далее работать с данными, не запрашивая их по новой.

Если использовать vuex - то для каждого компонента приходится подключать глобальный модуль - что в общем то, избыточно, на мой взгляд новичка.
  • Вопрос задан
  • 2160 просмотров
Пригласить эксперта
Ответы на вопрос 1
@GrayHorse
Как в 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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы