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

Question

[Николай]

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

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

Если использовать vuex - то для каждого компонента приходится подключать глобальный модуль - что в общем то, избыточно, на мой взгляд новичка.

Comments

[Alex_mos]

Vuex вы подключаете один раз и потом в любом компоненте получаете данные из стора. Не думаю что это избыточно

[Николай]

Alex_mos, я имею ввиду в каждом компоненте подключать этот стор: мап стейт, диспатч

[Алексей Скляров]

Николай, в каждом компоненте вы подключаете только те экшены и данные, которые вам нужны. Как по вашему данные должны быть доступны в любом компоненте?

Есть какое-то общее хранилище приложения, которое реализуется Vuex, в котором хранятся какие-то данные, но чтобы эти какие-то данные добавить к компоненту - указывается ..mapGetters, ...mapActions

[Alex_mos]

Николай, так если делать не через vuex все равно придется что то подключать и отправлять. Просто через vuex это удобнее.
И не во всех же компонентах вам нужно будет что то диспатчить.

[Николай]

Алексей Скляров, в смысле, как? Глобально :)

[Николай]

Alex_mos, Непонятно, подключил компонент, всё выводит, но в консоле три ошибки, в частности:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Console onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

А всего лишь выводиться подписка:

<div class=" col-md-6 col-lg-4">
  <plate before="Подписка" :heading="this.user.subscription.name"></plate>
</div>

А вот сам модуль:

export const userModule = {
    state: () => ({
        current: {},
        subscription: {}
    }),

    getters: {
        getUser(state) { return state.current },
    },

    mutations: {
        setUser(state, user) { state.current = user },
    },

    actions: {
        async updateUser({state,  commit}) {
            try {
                const response = await axios.get('/office/api/me');
                commit('setUser', response.data);
                console.log(response.data);
            } catch (e) {
                console.log(e);
                alert('Error');
            }
        },
    },

    namespaced: true,
}

[Alex_mos]

Николай, а можно ещё код комплекта

[Николай]

Alex_mos, комплекта?
вот компонент:

import {mapState} from 'vuex';
import axios from 'axios';

export default {
  data() {
    return {
      daysLeft: 0,
      news: [],
    }
  },

  methods: {
    async getNews() {
      axios.defaults.withCredentials = true;
      try {
        const response = await axios.get('/office/api/news');
        this.news = response.data;
      } catch(e) {
        console.log(e);
        alert('Error!');
      }
    }
  },

  created() {
    this.$store.dispatch("user/updateUser");
  },

  mounted() {
    let dayX = new Date(this.user.subscription_end);

    this.daysLeft = Math.floor((dayX - Date.now()) / 864e5);

    this.getNews();
  },

  computed: {
    ...mapState({
      user: state => state.user.current,
      subscription: state => state.user.subscription,
    }),
  }
}

[Николай]

Alex_mos, кажется я понял. т.к. данные асинхронны, в компонент plate данные не успевают подгружаться.
Как в этом случае быть?

[Alex_mos]

Николай, не пойму где вы вот эти данные получаетеthis.user.subscription.name
И тут state => state.user.current, у вас в стейте вроде нету user, вы это значение записываете в current.

И попробуйте тут:heading="this.user.subscription.name" убрать this

[Николай]

Alex_mos, чуть выше я скинул код модуля.

this.user.subscription.name я получаю, когда получаю юзера, функцией

async updateUser({state,  commit}) {
            try {
                const response = await axios.get('/office/api/me');
                commit('setUser', response.data);
                console.log(response.data);
            } catch (e) {
                console.log(e);
                alert('Error');
            }
        },

Вот setUser:
setUser(state, user) { state.current = user },

state => state.user.current,, да, нету. Но у модуля используются неймспейс, и имя ему - user

this убрал, вообще ничего не изменилось :(

[Alex_mos]

Николай, а можете прописать console.log и скинуть то что находится у вас в стейте после того как выполнится мутация.

[Николай]

Alex_mos, это в setUser вы имеете ввиду?
Если да, то:

Proxy {current: {…}, subscription: {…}}
[[Handler]]: Object
[[Target]]: Object
current: {name: 'User', email: '[e-mail]', money: 1500, subscription: {…}, subscription_start: '2021-11-15T17:20:02.000000Z', …}
subscription: {id: 1, active: 1, slug: 'free', name: 'Бесплатная', description: '', …}
[[Prototype]]: Object
[[IsRevoked]]: false

[Alex_mos]

Николай, блин что то я давно не садился за Vue, не могу сообразить.
Попробуй так

...mapState({
      user: state => state.current,
      subscription: state => state.subscription,
    }),

прописать. И можешь в в компоненте в хуке mounted через консоль вывести эти значения что там приходит(user, subscription)

[Николай]

Alex_mos, не, если убрать user - сразу всё валится с ошибками

вот что в консоли:

Proxy {name: 'User', email: '[e-mail]', money: 1500, subscription: {…}, subscription_start: '2021-11-15T17:20:02.000000Z', …}
Proxy {id: 1, active: 1, slug: 'free', name: 'Бесплатная', description: '', …}

Всё, 100% - все ошибки из-за асинхронного store'а, в браузере всё отрисовано, а вот в консоли:

main.min.js:13879 [Vue warn]: Invalid prop: type check failed for prop "heading". Expected Number | String, got Undefined  
  at <Plate before="Отправлено" heading=undefined after="за месяц" > 
  at <Console onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

heading=undefined - не успевает получить.

[Alex_mos]

Николай, попробуйте в компоненте created () заменить на mounted () и там диспатчить
Вот наткнулся

Функцию загрузки данных обычно помещают в mounted(), т.к. нужно отображать какой-нибудь прелоадер, а после загрузки данных - показывать и их.
Событие created() вызывается, когда компонент создан

У вас компонент создаётся а данные не успевают подгружаться поэтому undefined, в принципе почти как вы говорили

[Николай]

Alex_mos, я пробовал, тогда вообще ничего не грузится

Answer 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>