0

我不想使用文档中描述的状态扩展 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 的存在了。还是定义一个 vuex 模块并将其传递给它的更好方法，如下所述：https ://vuex-orm.org/guide/digging-deeper/vuex-module.html#defining-modules

但是这种方法会将状态和突变定义拆分到一个单独的文件中。

4

1 回答 1

0

在模型上定义的静态状态仍然需要相当多的冗长超出通用突变，并且直接反映您的评论“这不再是 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)
    }
  }
}
于 2020-05-17T23:15:26.237 回答