Vue 中处理数据的逻辑应该放在组件内还是放在 action内

Question

应用采用 Vue + Vuex

state = {
    checklist: [{
        title: 'xxx',
        content: 'xxx'
    }, {
        // ...
    }]
}

需要修改 checklist 某个子元素的值（如 checklist 的第 0 个元素的 content），那么我该如何选择以下两种处理方式呢：

• 在组件内处理这个修改的逻辑，然后将修改后的整个 checklist 通过 action 赋值

• 向 action 传递必要的参数，如第几个子元素、修改了哪些字段。整个修改逻辑在 action 内完成。

对于 第一种方式

会出现 在外部修改 state 的报错：Do not mutate vuex store state outside mutation handlers.

对于 第二种方式

我认为修改逻辑应该在组件自身完成，然后将修改后的结果传递给 action 中，不然 action 会很臃肿。

希望大家对于第一种方案提出解决方案，和说出你们的解决方案或看法。谢谢。

Answer 1

如果这个逻辑是很多个组件公用的.那就放在action.
如果这个逻辑再不同组件是不一样的.则放在组件内.

Answer 2

actions 里面写 抽象的与组件无关的逻辑流程，例如

actions: {
  login: function({commit}, username, password} {
    return fetchUseInfo(username, passoword)
      .then(res => {
         commit('SET_USER', res.user)
      })
  }
}

与组件有关系的逻辑则放到组件的方法立马处理：

 methods: {
    ...mapActions(['login']),
    triggerLogin: (){
        let username = this.username
        let password = this.password
        this.login(username, password)
    }
 }

另外： 你第一种方法出错是因为在方法里面直接修改了 state

Answer 3

您指得意思可以这样理解吗？

1. 在vuex中设置方法来改变state
   如果这个方法使用过于频繁，或多个组件、页面等需要使用建议您将方法写在vuex中，即写在actions中

2. 在单文件中直接修改变量，通过向action传递参数赋值给state
   如果说这个方法仅仅被一个地方调用，我建议您可以直接在methods中写变量的改变方法，然后通过actions赋值给state
   其实，这两种情况都必须需要通过mutation来改变state