Автоматически загружать состояние Vuex с помощью API-X в ваших приложениях Vue

отказ от ответственности: Api-x - это пакет npm, созданный и поддерживаемый «искренне Вашим», поэтому предвзятость допускается.

предварительные требования: читатель должен иметь базовые знания о javascript, vuejs и vuex.

Когда мы имеем дело с управлением состоянием в наших приложениях Vue, нам часто нужен простой способ определения наших аксессоров, мутаторов и действий, не увеличивая нашу кодовую базу до такой степени, что ее поддержка становится неуправляемой.

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

Я разработал api-x, чтобы быстро сформировать свое состояние и предоставить доступ к функциям состояния в моих компонентах Vue.

Здесь я покажу вам, как вы можете использовать это в своих собственных приложениях.

Установите api-x с помощью npm

npm i @agog/apix

Установите объект apix и инициализируйте его, используя пользовательские конфигурации в вашем файле state.js, как показано ниже;

import Vue from 'vue';
import Vuex from 'vuex';
import Apix from '@agog/apix';
Vue.use(Vuex);

const apix = new Apix({
    prefix: '/api/v1',
    params: {
        headers: {
       
        }
    }
    resources: [
        { name: 'users', url: 'users' }
        ...
    ],
});

export const store = new Vuex.Store({
    state: {
        ...apix.getState(),
    },
    getters: {
        ...apix.getGetters(),
    },
    mutations: {
        ...apix.getMutations(),
    },
    actions: {
        ...apix.getActions(),
    },
});

Изучив свое состояние Vuex с помощью Vue.js devtools, вы сможете увидеть все свои ресурсы, определенные и готовые к использованию.

Использование apix дает вам достаточно свободы для добавления пользовательских функций в свойства вашего состояния при автоматической генерации более повторяющихся. По сути, это дает вам свободу в ваших приложениях.