Understanding How Vuex State and Getters Are Mapped to Components and Updated Automatically

Preface

In the continuation of the deep‑dive series on Vuex principles, we answer the question "How are Vuex state and getters automatically mapped to each component instance and kept in sync?" and explore the underlying mechanisms.

Preparation

Problem: When the state or getter in the Store changes, how does Vuex ensure that all component instances receive the updated data and re‑render?

Problem Analysis

The core issue is component communication: a change in the Store must be propagated to every component that depends on that piece of data.

Brief Overview of Component Communication

Vue components can communicate in many ways, such as props, events, $parent/$children, provide/inject, refs, v‑bind/v‑on, event bus, $dispatch/$broadcast (Vue 1), and global variables. The article focuses on the event‑bus approach, which introduces a central communication bridge so that components only interact with the bus.

Below is a minimal example of using a central event bus in Vue:

let bus = new Vue({
  methods: {
    emit(event, ...args) { this.$emit(event, ...args); },
    on(event, callback) { this.$on(event, callback); }
  }
});

// component A
bus.emit('updateData', data); // send data to bus

// component B
bus.on('updateData', data => { /* receive data */ });

The central bus works by creating a Vue instance; its $emit and $on methods act as the communication bridge, enabling data sharing across components.

Exploring the Principle

We now look at how to access Vuex state and getters inside a component.

this.$store.state.xxx;
this.$store.state.moduleA.xxx;
this.$store.getters.xxx;
this.$store.getters.moduleA.xxx;

Vuex separates data into a state area and a getters area. The getters are derived from state .

// Store initialization
new Vuex.Store({ state, getters });

Source‑Code Analysis

The Store creates an internal Vue instance ( _vm ) whose data contains a reactive $$state object. The getter for state simply returns this._vm._data.$$state :

get state () {
  return this._vm._data.$$state;
}

During resetStoreVM , Vuex registers each getter as a computed property on the internal Vue instance:

const computed = {};
forEachValue(wrappedGetters, (fn, key) => {
  computed[key] = () => fn(store);
});
Object.defineProperty(store.getters, key, {
  get: () => store._vm[key],
  enumerable: true
});

Because Vue’s computed properties are also reactive, any component that accesses this.$store.getters.xxx receives a value that updates automatically when the underlying state changes, mirroring the behavior of Vue’s own computed properties.

Conclusion

1. Vuex state is implemented via Vue’s reactive data system. 2. Vuex getter is implemented via Vue’s computed feature. 3. The design philosophy is analogous to Vue’s central event bus, using a shared reactive object as a communication bridge.

For further exploration, refer to the previous article “Deep Dive into Vuex Principles (Part 1)”.