Как получить доступ к vuex из компонента Vue3?

В Vue 3 для получения доступа к Vuex из компонента необходимо использовать функцию useStore из пакета vuex. Рассмотрим подробно, как это сделать.

1. Установите пакет Vuex:

npm install vuex@next

2. Создайте новый файл, например, store.js, для создания и экспорта хранилища Vuex:

import { createStore } from 'vuex';

const store = createStore({
  state: {
    // ваши состояния (state) здесь
  },
  mutations: {
    // ваши мутации (mutations) здесь
  },
  // другие свойства Vuex здесь (геттеры, действия и т.д.)
});

export default store;

3. Подключите хранилище Vuex в главном файле вашего приложения, например, в main.js:

import { createApp } from 'vue';
import store from './store';
import App from './App.vue';

const app = createApp(App);
app.use(store); // подключаем хранилище Vuex к приложению
app.mount('#app');

4. Теперь, чтобы получить доступ к хранилищу в компоненте, просто импортируйте функцию useStore из vuex и вызовите ее:

import { useStore } from 'vuex';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const store = useStore(); // получаем доступ к хранилищу

    // ваши функции и код компонента

    return {
      // возвращаемые значения, если нужно
    };
  },
});

Теперь вы можете использовать состояния (state), мутации (mutations), геттеры (getters) или действия (actions) из Vuex в своем компоненте.

Примеры использования:

- Получение состояния:

const myState = store.state.myState;

- Вызов мутации:

store.commit('mutationName', payload);

- Использование геттера:

const getterValue = store.getters.getterName;

- Диспатч действия:

store.dispatch('actionName', payload);

Таким образом, с помощью функции useStore вы можете получить доступ к Vuex из компонентов Vue 3. Это позволяет легко управлять состоянием приложения и взаимодействовать с ним.