Is it possible to dispatch actions from getters in Vuex?

Question

Is it possible to dispatch actions from getters in Vuex?

Fiddle : here

Currently, I am in the process of developing a web application using Vue 2 with Vuex. Within my store, I aim to retrieve state data from a getter. My intention is for the getter to trigger a dispatch and fetch the data if it discovers that the data has not yet been populated.

This is how my Vuex store looks like:

const state = {
  pets: []
};

const mutations = {
  SET_PETS (state, response) {
    state.pets = response;
  }
};

const actions = {
 FETCH_PETS: (state) => {
      setTimeout(function() { 
            state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
    }, 1000)
 }
}

const getters = {
    pets(state){
    if(!state.pets.length){
        state.dispatch("FETCH_PETS")
    }
    return state.pets
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

However, an error message keeps popping up:

Uncaught TypeError: state.dispatch is not a function(…)

I am aware that this can be resolved by implementing it within the beforeMount hook of a Vue component. But considering that I have multiple components utilizing the same Vuex store, I need to decide on a single component for this implementation and understand its implications on the other components.

javascript vue.js vue-component vuex vuejs2

Answer 1

Answer №1

It is important to note that getters are unable to call dispatch since they receive the state rather than the context of the store.

On the other hand, actions have the ability to call state, dispatch, and commit because they are provided with the context.

The primary purpose of getters is to manage a 'derived state'.

If you opt to set up the pets state on the components that need it instead, you can simply execute FETCH_PETS from the root of your application, eliminating the necessity for the getter.

Answer 2

It is important to note that getters are unable to call dispatch since they receive the state rather than the context of the store.

On the other hand, actions have the ability to call state, dispatch, and commit because they are provided with the context.

The primary purpose of getters is to manage a 'derived state'.

If you opt to set up the pets state on the components that need it instead, you can simply execute FETCH_PETS from the root of your application, eliminating the necessity for the getter.

Answer 3

Answer №2

While browsing through some older discussions, I came across a method that caught my attention for dispatching from a getter in my store module:

import store from "../index"

I incorporated the store within my getter by using this approach:

store.dispatch("moduleName/actionName")

This tactic was employed to ensure that data was accessible even if it had not yet been retrieved.

*revision: I feel it is important to draw your attention to the following resource: Vue form - getters and side effects

This subject ties back to @storsoc's observation.

If you find yourself needing to dispatch actions from your getter, it may indicate a flaw in how your state is structured. Perhaps an ancestor component should have fetched the necessary data beforehand (state lifting). Additionally, bear in mind that getters ought to be utilized when deriving new data from the existing state before presenting it in your template; otherwise, you can refer directly to the state like so: this.$store.state.variable for use in methods/computed properties.

Consider incorporating these considerations into your lifecycle methods. For instance, in your mounted or created methods, you could verify if the state has been initialized and dispatch if necessary. If your getter / "direct state" resides within a computed property, it should automatically register any changes.

Answer 4

While browsing through some older discussions, I came across a method that caught my attention for dispatching from a getter in my store module:

import store from "../index"

I incorporated the store within my getter by using this approach:

store.dispatch("moduleName/actionName")

This tactic was employed to ensure that data was accessible even if it had not yet been retrieved.

*revision: I feel it is important to draw your attention to the following resource: Vue form - getters and side effects

This subject ties back to @storsoc's observation.

If you find yourself needing to dispatch actions from your getter, it may indicate a flaw in how your state is structured. Perhaps an ancestor component should have fetched the necessary data beforehand (state lifting). Additionally, bear in mind that getters ought to be utilized when deriving new data from the existing state before presenting it in your template; otherwise, you can refer directly to the state like so: this.$store.state.variable for use in methods/computed properties.

Consider incorporating these considerations into your lifecycle methods. For instance, in your mounted or created methods, you could verify if the state has been initialized and dispatch if necessary. If your getter / "direct state" resides within a computed property, it should automatically register any changes.

Answer 5

Answer №3

Encountered a similar issue.. was looking to have all Vue instances automatically load certain content, so I created a mixin:

store.registerModule('session', {
    namespaced: true,
    state: {
        session: {hasPermission:{}},
        sessionLoaded:false
    },
    mutations: {
        changeSession: function (state, value)
        {
            state.session = value;
        },
        changeSessionLoaded: function (state)
        {
            state.sessionLoaded = true;
        }

    },
    actions: {
        loadSession(context)
        {
            // Ajax request that sets context.state.session=something
        }
    }
}); 

Vue.mixin({
    computed: {
        $session: function () { return this.$store.state.session.session; },
    },
    mounted:function()
    {
        if(this.$parent==undefined && !this.$store.state.session.sessionLoaded)
        {
            this.$store.dispatch("session/loadSession");
            this.$store.commit("changeSessionLoaded");
        }
    },
});

By implementing it to load only once per vue instance and store, and automatically including it in every Vue instance, there is no need to define it in every main app.

Answer 6

Encountered a similar issue.. was looking to have all Vue instances automatically load certain content, so I created a mixin:

store.registerModule('session', {
    namespaced: true,
    state: {
        session: {hasPermission:{}},
        sessionLoaded:false
    },
    mutations: {
        changeSession: function (state, value)
        {
            state.session = value;
        },
        changeSessionLoaded: function (state)
        {
            state.sessionLoaded = true;
        }

    },
    actions: {
        loadSession(context)
        {
            // Ajax request that sets context.state.session=something
        }
    }
}); 

Vue.mixin({
    computed: {
        $session: function () { return this.$store.state.session.session; },
    },
    mounted:function()
    {
        if(this.$parent==undefined && !this.$store.state.session.sessionLoaded)
        {
            this.$store.dispatch("session/loadSession");
            this.$store.commit("changeSessionLoaded");
        }
    },
});

By implementing it to load only once per vue instance and store, and automatically including it in every Vue instance, there is no need to define it in every main app.

Answer 7

Answer №4

To dynamically configure a page, I implement a getter that looks something like this:

getter: {
  configuration: function () {
    return {
      fields: [
        {
          component: 'PlainText',
          props: {},
          setPropsFromPageState: function (props, pageState, store) {
            // custom logic
          }
        }
      ]
    };
  }
}

When setting props on a dynamic component within the page component, I utilize the

setPropsFromPageState(field.props, this.details, this.$store)

method. This allows for config-level logic to modify the props values or trigger actions if necessary.

This callback function, stored in the getter, is executed in the component's context and has access to $store through it.

Answer 8

To dynamically configure a page, I implement a getter that looks something like this:

getter: {
  configuration: function () {
    return {
      fields: [
        {
          component: 'PlainText',
          props: {},
          setPropsFromPageState: function (props, pageState, store) {
            // custom logic
          }
        }
      ]
    };
  }
}

When setting props on a dynamic component within the page component, I utilize the

setPropsFromPageState(field.props, this.details, this.$store)

method. This allows for config-level logic to modify the props values or trigger actions if necessary.

This callback function, stored in the getter, is executed in the component's context and has access to $store through it.

Is it possible to dispatch actions from getters in Vuex?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Deliver feedback from NodeJS Server to JavaScript on the client side

Countdown Clock in JavaScript for Automatic Logout

Issue with retrieving data from an external provider

Populate select2 with the selected value from select1 without the need to refresh the page or click a button

Ways to show a child's component element within the parent container

How can a color gradient blend be applied to geometry on multiple axes using THREE.JS shader?

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

AngularJS: Patience for an asynchronous request

Problem with the render() function in React

Looping through data in Vue.js with a specific condition

What is the best way to access the methods in the "parent" class?

How can we automatically delete a message in DiscordJS after a certain amount of time has passed?

In the world of React-Three-Fiber and ThreeJS, the sprite alpha can often appear quite jagged

Concurrent execution within a Node.js function

Contrast: Colon vs. Not Equal Sign (Typescript)

Employing require.js, one can integrate a distinctive form of non-concatenated dat.gui source. This allows for the seamless

Ways to capture targeted requests

Guide on how to align the bootstrap popover's arrow tip with a text field using CSS and jQuery

Designating a class for the main block

Error: Attempting to access property 'propeller' of an undefined object has caused a TypeError