How to call vue method inside vuex module?

by filiberto , in category: Javascript , a year ago

How to call vue method inside vuex module?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by mac , a year ago

@filiberto 

To call a Vue method inside the Vuex module, you need to use the following steps:


Step 1: Define a method in the Vue component

1
2
3
4
5
6
7
8
// Vue component
export default {
  methods: {
    myMethod() {
      // do something
    }
  }
}


Step 2: Import the store into the Vue component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { mapState, mapActions } from 'vuex'

export default {
  // ...
  computed: {
    ...mapState(['myState'])
  },
  methods: {
    ...mapActions(['myAction'])
  }
}


Step 3: Dispatch an action from the Vue component

1
2
3
4
5
6
7
// Vue component
methods: {
  myMethod() {
    // Call the action from the store
    this.myAction()
  }
}


Step 4: Define the action in the Vuex module

1
2
3
4
5
6
7
8
9
// Vuex module
export default {
  actions: {
    myAction(context) {
      // Call the Vue method using the context object
      context.dispatch('myMethod')
    }
  }
}


By dispatching the action from the Vuex module, you can call the Vue method using the context object. Note that context represents the Vuex store and provides access to actions, mutations, and state.

Related Threads:

How to use vue-router in vuex module actions?
How to call class method inside a laravel view?
How to create module inside module in codeigniter?
How to test vuex module using mocha and chai?
How to enable the ftp module in php "call to undefined function ftp_connect()"?
How to call a vuex action in component?