Как объединить локальные вычисляемые свойства с помощником mapState?

В Vue.js mapState — это вспомогательная функция из Vuex, которая позволяет вам синхронизировать состояние вашего Vuex хранилища с компонентами Vue. Тем не менее, иногда вам может потребоваться использовать локальные вычисляемые свойства вместе с глобальным состоянием, полученным через mapState. В этом ответе мы объясним, как это сделать, и предоставим кодовые примеры.

Основная структура

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

Шаг 1: Настройка Vuex хранилища

Мы начнем с создания простого хранилища Vuex:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  }
});

export default store;

Шаг 2: Использование mapState в компоненте

Теперь мы создадим компонент, который будет использовать mapState для извлечения значения counter, а также будет иметь локальное вычисляемое свойство doubleCounter.

// CounterComponent.vue
<template>
  <div>
    <p>Счетчик: {{ counter }}</p>
    <p>Удвоенный счетчик: {{ doubleCounter }}</p>
    <button @click="increment">Увеличить</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    // Используем mapState для получения значения из хранилища
    ...mapState(['counter']),
    
    // Локальное вычисляемое свойство
    doubleCounter() {
      return this.counter * 2; // Удваиваем значение счетчика
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

Пояснение к коду

Заключение

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