Где обновить состояние Vuex данными API

Question

Этот вопрос больше относится к вопросу организации кода. Я новичок во всем интерфейсе. Я запустил простое приложение на базе VueJS + Vuex + VuerRouter + Vuetify + TypeScript. Это представление папки src:

├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── plugins
│   └── ...
├── router
│   └── ...
├── services
│   └── StuffAPI.ts
├── store
│   ├── index.ts
│   └── modules
│       └── stuff.ts
└── views
    └── Stuff.vue

Я предварительно выбираю большую часть данных, необходимых в App.vue на mounted():

export default class extends Vue {
  listStuffs() {
    StuffAPI.list()
      .then((stuffs: Stuff[]) => {
        this.$store.dispatch("stuff/changeStuffs", stuffs);
      })
      .catch(e => {
        // ...
      });
  }

  mounted() {
    this.listStuffs();
  }
}
</script>

Однако существуют ситуации где компоненты изменяют данные на стороне сервера (например, путем создания ресурса). Теперь мне нужно снова получить данные с сервера. Однако я не хочу копировать метод listStuffs по всей базе кода. Как мне это решить? Я не могу вызвать родительские методы из дочернего компонента. Должен ли я использовать пользовательские события? Или вполне нормально иметь действие Vuex, которое извлекает данные?

Answer 1

Во-первых, вы можете использовать 'Mixins' в VueJS. Mixins - это функция, которая позволяет использовать одну и ту же функцию во всех компонентах приложения.

Во-вторых, вы можете использовать Vuex.

1. Создать магазин. (Например: CustomAPI. js)
2. Запись геттеров, мутаций и действий в файл
3. Вызов действий в компонентах (например: this. $ Store.dispatch ('StuffAPI')). then ()
4. Сохранять мутации результата StuffAPI в хранилище
5. Извлекать мутированные данные, используя геттеры

Для справки, проверьте код ниже:

import * as types from '../types'
// Import axios or any http client

export const state = {
  isLoggedIn: false
}

export const getters = {
  isLoggedIn: state => state.isLoggedIn
}

export const mutations = {
  [types.MUTATE_LOGIN_FLAG]: (state, isLoggedIn) => {
    state.isLoggedIn = isLoggedIn
  }
}

export const actions = {

  AUTH_LOGIN: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
      // MY HTTP LOGIN REQUEST CODE HERE

    //   On result..
    commit(types.MUTATE_LOGIN_FLAG, true)
    })
  },

  AUTH_LOGOUT: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
    //  MY HTTP LOGOUT REQUEST CODE HERE

    // ... On result, 
    commit(types.MUTATE_LOGIN_FLAG, false)
    })
  }
}

Теперь, когда мне понадобится статус входа в какой-либо компонент, я буду использовать:

this.$store.getters.isLoggedIn

Возвращает значение True или False.

Всякий раз, когда мне нужно войти или выйти, я Я буду использовать:

this.$store.dispatch('AUTH_LOGIN')

Я могу вызывать эти действия в любом месте моего приложения.

Примечание: Это всего лишь пример реализации. Вы действительно не пишете вход в систему в магазине: D