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

应用采用 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 会很臃肿。

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

回答:

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

回答:

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

回答:

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

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注