Vue cli - подключение и использование Vuex

Категория: VueJS

Установка, конфигурация и использование vuex в vue cli проекте.

Установка

Установка vuex как плагин

vue add vuex

Установка вручную

Ставим пакет:

npm -i -S vuex

Инициализируем пустое хранилище Vuex.Store:

# store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
});

Регистрируем хранилище Vuex.Store:

# main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store'

new Vue({
    store,
    render: h => h(App)
}).$mount('#app');

Использование хранилища

Пример store с авторизацией и хранением JWT-токена:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        auth: {
            token: localStorage.getItem('authToken') || '',
            code:  localStorage.getItem('authCode')  || '',
        }
    },

    // Мутации используются для синхронных транзакции и должны содержать только синхронные операции.
    mutations: {
        /**
         * Example usage in Vue components: this.$store.commit('setAuthToken', token);
         * @param {Object} state
         * @param {String} token
         */
        setAuthToken(state, token) {
            localStorage.setItem('authToken', token);
            state.auth.token = token;
        },
        setAuthCode(state, code) {
            localStorage.setItem('authCode', code);
            state.auth.code = code;
        }
    },

    // Действия используются для выполнения асинхронных операций, с последующим вызовом мутаций.
    actions: {
        /**
         * Example usage in Vue components: store.dispatch('setAuthToken', token);
         * @param {Store} context Signature: context.state, context.commit, etc..
         * @param {String} code
         */
        authByCode(context, code) {
            context.commit('setAuthCode', code);

            let params = {code: code};
            api.post(`auth-by-code`, params).then(response => {
                if (response.data.success && response.data.token) {
                    context.commit('setAuthToken', response.data.token);
                } else {
                    context.commit('setAuthToken', '');
                }
            });
        },
    }
});

export default store;

Вызов действия авторизации и получение JWT-токена:

let promise = this.$store.dispatch('authByCode', this.authCode);
let token = this.$store.state.auth.token;

#vue-cli, #vuex, #jwt-auth

категория: VueJS