定义和改变附加状态的 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
    })
  }
}

在组件内部我有一个方法，它触发静态待办事项方法，如下所示：

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

不过感觉这个vuex已经不再远了。还是定义一个 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)
    }
  }
}

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

Vuex ORM best practice for defining and mutating additional state

vuex

vuex-orm