Vuex ORM定义和变异附加状态的最佳实践

Question

我不打算对vuex-orm模型进行扩展，其状态类似于文档：https://vuex-orm.org/guide/digging-deeper/vuex-module.html#defining-state所描述的状态。

改变模型中定义的状态的最佳方法是什么？通过定义静态函数？我不知道如何在模型中使用动作和突变？

以下是我的做法：

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
    })
  }
}

在组件中，我有一个方法，它触发静态todo方法，如下所示：

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

但这已不再是情有可原的感觉。或者这是一种更好的方法来定义vuex模块并将其传递给它，如下所述：https://vuex-orm.org/guide/digging-deeper/vuex-module.html#defining-modules

但是这种方法将分离文件中的状态和突变定义分割开来。

Answer 1

在模型上定义的静态状态仍然需要大量的冗长，而不仅仅是泛型的变异，为了直接反映您的评论“这不再是vuex的方式”，您最好将这种逻辑分解到它自己的模块中，以保持某种形式的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)
    }
  }
}