Is there any benefit of using mapState over mapGetters in Vuex?

Question

I am reviewing company code and see that in one of the Vue components, there are some computed properties that look like this:

  computed: {
    ...mapState('settings', {
      site: state => state.general.site
    }),
    ...mapGetters('settings', [
      'getRouteName'
    ])
  }

Is there a benefit to using mapState over mapGetters? Why wouldn't we just create a mapGetter method for the site just like we did for the routeName?

My thought is maybe the arrow function helps with something but I didn't see anything in the documentation I looked at here: Vuex

Not sure if this matters, but the `site` is set in the store dynamically so there is no default value in the store. Maybe that has something to do with it? — mcool, Aug 09 '22 at 14:06

score 1 · Accepted Answer · answered Aug 09 '22 at 18:17

Getters allow you to create computed properties (derived state) on the store.

The getters are methods where you can define a logic to compute the derived state

An example:

const store = createStore({
  state: {
    orders: [
      { id: 1, active: true, subtotal: 100 },
      { id: 2, active: false, subtotal: 200 }
    ]
  },
  getters: {
    activeOrders (state) {
      return state.orders.filter(order => order.active)
    },
    total (state) {
       ...
    }
  }
})

Here is a getter that returns the active orders, and a method that returns the total value of all the orders. Both use the internal state (orders) and generate a derived state.

It works similar as the Computed properties in Vue Components.

Raeisi · Answer 2 · 2022-08-09T18:03:27.697

The simple answer is laziness :-)

In a perfect programming paradigm, we are not allowed to use the state directly. The state should mutate only through mutations. It helps us track changes down and build a timeline to trace modifications. Redux, for instance, shows you a play/pause button so we can observe the data changing as time runs by.

The main downside of using the state directly gets modified. If a part of the state changes, it breaks the time travel. Mapping the state arises the risk of modifying data outlaw. Most modifications occur intentionally. In this matter, binding them to a model or sending them into a mutable function. It will blow out your console's logs by enormous errors. (there is a strict config to switch it off)

The main advantage of using MapGetters is that the state cannot be manipulated accidentally. Furthermore, providing getters helps us add some extra logic. For example, set a default value, filter lists, map or transform, and limit the returned object/value. Also, getters are access to the whole of the state, thus they can apply some logic or implement business from the entire state. It encapsulates rules and prevents code leaking.

Using state directly may put the program in a real riddle by increasing the risk of being manipulated. As a de facto, use getters wherever you need to read the state. For one, at first, it was boring and seemed unnecessary, but as a project grows more, you appreciate it more. Finally, Vue 3 has deprecated Vuex and suggests Pinia as a better alternative.

Also, see Best Practice Mapping Vuex

Why Pinia for Vue 3

Is there any benefit of using mapState over mapGetters in Vuex?

2 Answers2