Лучшая практика Vuex ORM для определения и изменения дополнительного состояния

Question

Я не хочу расширять модель vuex-orm с состоянием, описанным в документации: https://vuex-orm.org/guide/digging-deeper/vuex-module.html#defining -state

Каков наилучший способ изменить определенное состояние в модели? Определив функцию stati c? Я не мог понять, как использовать действия и мутации внутри модели?

Вот мой подход:

import { Model } from '@vuex-orm/core'

export default class Todo extends Model {
  static entity = 'todos'

  static state ()  {
    return {
      selected_id: null
    }
  }

  static fields () {
    return {
      id: this.attr(null),
      title: this.string(''),
    }
  }

  static updateSelectedTodo (selected_id) {
    Todo.commit((state) => {
      state.selected_id = selected_id
    })
  }
}

А внутри компонента у меня есть метод, который запускает состояние c todo метод вроде этого:

methods: {
  updateSelectedTodo (selected_id) {
    Todo.updateSelectedTodo(selected_id);
  },
}

Но vuex больше не чувствует этого. Или это лучший подход - определить модуль vuex и передать его ему, как описано здесь: https://vuex-orm.org/guide/digging-deeper/vuex-module.html#defining -modules

Но этот подход разделил бы определения состояния и мутации в отдельный файл.

Answer 1

Stati c состояния, определенные на моделях, по-прежнему требуют значительного количества подробностей, помимо общих c мутаций, и в прямом отражении вашего комментария «это больше не ощущается как vuex» , вы может быть лучше разбить этот тип logi c на отдельный модуль, чтобы сохранить некоторую форму согласованности Vuex.

Вам не обязательно помещать свой модуль в отдельный файл, это вопрос мнение. Вы можете объявить и экспортировать свой модуль в том же файле:

export default class Todo extends Model {
  static entity = 'todos'

  static fields () { ... }
}

export const todos = {
  state: () => {
    selected_id: null
  },
  mutations: {
    updateSelected: (state, selected_id) => {
      state.selected_id = selected_id
    }
  },
  getters: {
    selected: (state) => state.selected_id
  }
}

И импортировать его при регистрации в магазине:

import Todo, { todos } from '...'

database.register(Todo, todos)

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

export default {
  computed: {
    selectedTodo: {
      get: () => Todo.getters('selected'),
      set: (selected_id) => Todo.commit('updateSelected', selected_id)
    }
  }
}