Vue.js – vuex actions that do not need to commit a mutation

vue.jsvuex

Using Vue and Vuex, I have followed the recommended practice of making changes to state only via mutations. So all Vue components will make changes to state via the use of an action which then in turn commits a mutation. I also make API calls in some actions which then update state based on the result.

I now have some API calls that do not need the state to be updated after they are called. Question is should I still use actions? or should I bypass vuex and make those calls directly from components?

Best Answer

The main reasons for using actions are these:

mutations have to be synchronous, actions can be asynchronous -> If you want to deal with asynchronous operations before a mutation, you have to use an action
if you want to commit multiple mutations at once, you can bundle them logically into one action

So in conclusion, you are right: If it is clear to you that these API calls do not alter the application's state in any way, they shouldn't be called by using actions.

Make those calls directly inside your components, import a module holding the needed functions or put the respective methods into a mixin if you want them to be shared between multiple components.

If you should, however, find out during development that the result of these calls should be shared between multiple components of your application, move the respective logic to the store via actions and mutations.

Related Solutions

Vue.js – Vuex Action vs Mutations

Question 1: Why the Vuejs developers decided to do it this way?

Answer:

When your application becomes large, and when there are multiple developers working on this project, you will find the "state manage" (especially the "global state"), will become increasingly more complicated.
The vuex way (just like Redux in react.js) offers a new mechanism to manage state, keep state, and "save and trackable" (that means every action which modifies state can be tracked by debug tool:vue-devtools)

Question 2: What's the difference between "action" and "mutation"?

Let's see the official explanation first:

Mutations:

Vuex mutations are essentially events: each mutation has a name and a handler.

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // mutate state
      state.count++
    }
  }
})

Actions: Actions are just functions that dispatch mutations.

// the simplest action
function increment ({commit}) {
  commit('INCREMENT')
}

// a action with additional arguments
// with ES2015 argument destructuring
function incrementBy ({ dispatch }, amount) {
  dispatch('INCREMENT', amount)
}

Here is my explanation of the above:

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)

Linux – ip route add by specifying source address in the same network

I managed to solve the problem by adding on the proxy the following:

# sysctl net.ipv4.ip_forward=1 or add net.ipv4.ip_forward=1 in /etc/sysctl.conf (to keep it after you close the terminal)
# iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

-A POSTROUTING   Append a rule to the POSTROUTING chain
-o eth0          this rule is valid for packets that leave on the eth0 network interface (-o stands for "output")
-j MASQUERADE    the action that should take place is to 'masquerade' packets, i.e. replacing the sender's address by the router's address.

And I added on pc1,pc2,pc3,pc4:

ip route add pcDestIP via proxy

Where pcDest ip is pc3 and pc4 in case I am writing the rule on pc1.

More info : http://www.karlrupp.net/en/computer/nat_tutorial

and here: https://serverfault.com/questions/306024/how-to-route-network-traffic-of-a-host-via-another-host

Best Answer

Related Solutions

Vue.js – Vuex Action vs Mutations

Linux – ip route add by specifying source address in the same network

Related Topic