Структурирование магазина правильными ногами с помощью vue/vuex

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

Что такое Векс?

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

Почему мы должны использовать Vuex?

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

Структура магазина

store.js

Всю логику Vuex лучше хранить в отдельном файле. Мы сохраним нашу логику в файле с именем store.js. В нашем файле store.js у нас есть объект хранилища, который является нашим хранилищем Vuex.

Магазин — это экземпляр объекта Vuex.store, который состоит из четырех объектов. Четыре объекта: state, actions, mutations и getters.

Поскольку эти объекты были определены в разных файлах, их необходимо импортировать в файл store.js, а затем передать в экземпляр хранилища.

import Vue from 'vue';
import Vuex from 'vuex';
import {state} from './state';
import {actions} from './actions';
import {mutations} from './mutations';
import {getters} from './getters'; 
Vue.use(Vuex);
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

state.js

Sstate — это объект, содержащий состояние данных приложения.

export const state = {
  data: [],
  isLoading: true
};

mutations.js

Мутации — это также объект, который содержит методы, влияющие на состояние и предназначенные только для управления состояниями, для манипулирования ими.

У мутации может быть два аргумента: состояние и полезная нагрузка:

State содержит текущее состояние приложения.
Полезная нагрузка является необязательным параметром, который позволяет изменять данные.

 export const mutations = {
   SET_DATA(state , payload){
     state.data = payload;  
   },
   IS_LOADING(state , payload){
     state.isLoading = payload;
   }
 };

actions.js

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

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

import axios from 'axios';
const BASE_API_URL= '...';
const API_URL_ENDPOINT = '...';
const A = axios.create({ baseURL: String(BASE_API_URL) });
export const actions = {
  GET_DATA({commit}){
    A.get(API_URL_ENDPOINT).then((res) =>{
      commit('SET_DATA' , res.data);
      commit('IS_LOADING' , false);
    }).catch((err) =>{
      console.error(err)
    });
  }
};

getters.js

Геттеры содержат методы, используемые для абстрагирования доступа к состоянию и выполнения некоторых задач предварительной обработки, если это необходимо (вычисление данных, фильтрация и т. д.).

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

Геттерыполучат состояниев качестве своего первого аргумента.

В следующем примере мы будем использовать библиотеку Lodash. Lodash — это известная служебная библиотека JavaScript, которая позволяет легко манипулировать массивами и объектами, а также функциями, строками и т. д.

Итак, поскольку нас интересует именно фильтрация некоторых данных, мы воспользуемся функцией _.filter().

`_.filter(collection, [predicate=_.identity])`

Перебирает элементы collection, возвращая массив всех элементов, для которых predicate возвращает истину. Предикат вызывается с тремя аргументами: (значение, индекс|ключ, коллекция).

var _ = require('lodash');
export const getters = {
  FILTER_SPESIFIC_DATA: (state) =>{
    return _.filter(state.data , (data) =>{
      // ....
    });
  }
};

Работа в папке представления

Home.vue

Когда компоненту необходимо использовать несколько свойств состояния хранилища или геттеров, объявление всех этих вычисляемых свойств может стать повторяющимся и многословным. Чтобы справиться с этим, мы можем использовать mapStatehelper, который генерирует для нас вычисляемые функции получения.
Однако самый простой способ получить доступ к геттерам в вашем компоненте — использовать вспомогательный метод Vuex mapGetter. Это позволяет вам монтировать геттеры к вычисляемым свойствам верхнего уровня в вашем компоненте.

Обратите внимание, что mapState возвращает объект. Как мы можем использовать его в сочетании с другими локальными вычисляемыми свойствами? Обычно нам приходилось использовать утилиту для объединения нескольких объектов в один, чтобы мы могли передать конечный объект computed. Однако с помощью оператора расширения объекта (который является предложением ECMAScript стадии 4) мы можем значительно упростить синтаксис, что в равной степени применимо и к mapGetters .

Свойства спреда

Распространение свойств в инициализаторах объектов копирует собственные перечисляемые свойства из предоставленного объекта во вновь созданный объект.

<template>
  <div class="content">
    <div v-if="isLoading"> loading...</div>
    <div v-else>
       <div v-for="(content , index) in data" :key="index">
         // ....
       </div>
    </div> 
  </div>
</template>
<script>
  import {mapState , mapGetters} from 'vuex';
  import store from '../store/store.js';
   
  export default{
    name: 'home',
    computed:{
      ...mapState(['data' , 'isLoading']),
      ...mapGetters(['FILTER_SPESIFIC_DATA']),
      filteredDataObj(){
        return FILTER_SPESIFIC_DATA()
      }
    },
    created(){
      store.dispatch('GET_DATA')
    }
  };
</script>
<style scoped>
  .content{
    ....
  }
</style>

Ну наконец то…..

main.js

Теперь, чтобы получить доступ к хранилищу, вам нужно либо импортировать его во все свои компоненты, либо вы можете внедрить его в корневой экземпляр Vue, чтобы он автоматически внедрялся во все остальные компоненты вашего приложения asthis.$store или импортируя файл store.js из папка магазина.

import Vue from 'vue';
import Vuex from 'vuex';
import App from 'App.vue';
import { store } from '../store/store.js';
Vue.config.productionTip = false;
Vue.use(Vuex);
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

Вывод

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

Начальный шаблон Github

https://github.com/ChrisMichaelPerezSantiago/vuex-store-starter

Начальный интерфейс командной строки Vue Store

https://www.npmjs.com/package/vuex-store-starter-cli/v/1.1.0?fbclid=IwAR3X-QIcoa_2MdXcaVHOQRNjTaMxDr8Ch091UUxCA0ra9yas2N-gBucGhf4`

Ссылки

Прогрессивная среда JavaScript. Получено 22 мая 2019 г. с https://vuejs.org/.

Я буду рад, что вам понравилась эта статья! 💖

Структурирование магазина правильными ногами с помощью vue/vuex