Модули (несколько хранилищ) Vuex в Vue

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

Модули следуют тому же принципу, единственное отличие заключается в том, что мы можем определить несколько хранилищ:

App.vue<script>
export default {
  data() {
    return {
      // получаем длину массива
      id: this.$store.getters['users/getUsers'].length,
    }
  },
  methods: {
    newUser: function () {
      // используем "commit" для вызова мутаций в Vuex
      this.$store.commit('users/addUser', {
        // увеличиваем id на единицу
        id: this.id++,
        // обращаемся к элементам через ref
        name: this.$refs.username.value,
        email: this.$refs.email.value
      })
    }
  }
};
</script>
<template>
  <p>{{ this.$store.getters }}</p>
  <p>{{ this.$store.getters['users/getUsers'] }}</p>
  <p>{{ this.$store.getters['articles/getArticle'] }}</p>
  <input type="text" placeholder="Добавьте имя пользователя" id="username" ref="username">
  <input type="text" placeholder="Добавьте email" id="email" ref="email">
  <input type="submit" id="submit-user" @click="newUser" value="Submit">
</template>

src/main.jsimport {createApp} from 'vue'
import {createStore} from 'vuex'
import App from './App.vue'

const app = createApp(App);

// модуль userStore
const userStore = {
    // если у модуля задать параметр namespaced: true, экшены и геттеры надо будет вызывать с именем модуля
    namespaced: true,
    // данные модуля
    state() {
        return {
            users: [
                {id: '1', name: 'Иван Иванов', email: 'test@yandex.ru'}
            ]
        }
    },
    // добавляем данные
    mutations: {
        addUser(state, newUser) {
            state.users.push({
                id: newUser.id,
                name: newUser.name,
                email: newUser.email
            })
        }
    },
    // получаем данные
    getters: {
        getUsers(state) {
            return state.users;
        }
    }
}

// модуль articleStore
const articleStore = {
    // если у модуля задать параметр namespaced: true, экшены и геттеры надо будет вызывать с именем модуля
    namespaced: true,
    // данные модуля
    state() {
        return {
            articles: [
                {id: '1', art: '15847569255'}
            ]
        }
    },
    // получаем данные
    getters: {
        getArticle(state) {
            return state.articles;
        }
    }
}

// общий store
const store = createStore({
    modules: {
        // псевдоним users для модуля userStore
        users: userStore,
        // псевдоним articles для модуля articleStore
        articles: articleStore
    }
})

app.use(store).mount('#app')

Теперь у нас есть два логически разных хранилища данных.

Доступ к геттерам

В приведенном выше примере, поскольку мы храним данные немного иначе, для доступа к нашим пользователям нужно использовать геттер getUsers, для обращения используем:

this.$store.getters['users/getUsers']

Доступ к мутациям

Как и раньше, мы по-прежнему можем получить доступ ко всем мутациям через this.$store.commit(). Только нам нужно добавить наше пространство имён. Чтобы использовать мутацию addUser, мы пишем users/addUser:

this.$store.commit('users/addUser', {} )