vue.js - Vuex Action vs Mutations

mutation is the only way to modify state

mutation doesn 't care about business logic, it just cares about state

action is business logic

action can commit more than 1 mutation at a time, it just implements the business logic, it doesn 't care about data changing (which manage by mutation)

Actions can contain arbitrary asynchronous operations

Mutation 是修改状态的唯一方法

Mutation 并不关心业务逻辑，它只关心状态

Actions 是业务逻辑

Actions 可以同时提交1个以上的Mutation ，它只是实现业务逻辑，不关心数据变化（由Mutation 管理）。

Actions 可以包含任意的异步操作

# Methods vs Computed in Vue

Ref: (stackoverflow.com/questions/4…)

Computed Property 计算属性

A more appropriate name for a computed value is a computed property. In fact, when the Vue is instantiated, computed properties are converted into a property of the Vue with a getter and sometimes a setter. Basically you can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. You don't call a computed and it doesn't accept any parameters. You reference a computed property just like you would a data property.

计算值的一个更合适的名字是计算属性。事实上，当Vue被实例化时，计算属性会被转换为Vue的一个属性，有一个getter，有时还有一个setter。基本上你可以把计算值看作是一个派生值，每当用于计算它的一个基础值被更新时，它就会自动更新。你不会调用一个计算值，它也不接受任何参数。 你引用一个计算的属性就像引用一个数据属性一样。


computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

Which is referenced in the DOM like this:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

Computed values are very valuable for manipulating data that exists on your Vue. Whenever you want to filter or transform your data, typically you will use a computed value for that purpose.

计算值对于操作存在于你的Vue上的数据是非常有价值的。每当你想过滤或转换你的数据时，通常你会使用一个计算值来达到这个目的。


data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

Computed values are also cached to avoid repetitively calculating a value that doesn't need to be re-calculated when it hasn't changed (as it might not be in a loop for example).

计算的值也被缓存起来，以避免重复计算一个没有变化时不需要重新计算的值（因为它可能不在一个循环中）。

Method

A method is just a function bound to the Vue instance. It will only be evaluated when you explicitly call it. Like all javascript functions, it accepts parameters and will be re-evaluated

一个方法只是一个绑定到Vue实例的函数。它只有在你明确调用它时才会被评估。像所有的javascript函数一样，它接受参数并将被重新评估。


data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichChar))
    }
}

this.$store.dispatch =>actions---用来触发异步操作的方法。

在store中注册了mutation和action，在组件中用dispatch调用action，然后action用commit调用mutation，

当操作行为中含有异步操作:比如向后台发送请求获取数据，就需要使用actiondispatch去完成了。其他使用commit即可。

Action vs Mutations, Methods vs Computed(译)

vue.js - Vuex Action vs Mutations

# Methods vs Computed in Vue

Method

this.$store.dispatch =>actions---用来触发异步操作的方法。