How to dispatch action from a javascript file (instead of a vue component)?

Question

I have one module(javascript file) outside of vue context. i need to dispatch action from this javascript file. is it possible ? if yes, then how ?

jsfile.js(Javascript file)

const detail = {};

detail.validateLocation = (location) => {
  // need to dispatch one action from here.
  // dispatch('SET_LOCATION', {city: 'California'})
  // how to dispatch action ?
}

export default detail;

action.js

export default {
  SET_LOCATION: ({ commit}, data) => {
    commit('SET_LOCATION', data);
  },
}

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export function createStore() {
  return new Vuex.Store({
    modules: {},
    state: {
      location: null
    },
    actions,
    mutations,
    getters,
  });
}

score 36 · Accepted Answer · answered Oct 12 '17 at 18:45

36

First, create the store in store.js.

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';

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

export default store

Then, import the store into jsfile.js and use it.

import store from "./store"

const detail = {};

detail.validateLocation = (location) => {
  // Use imported store
  store.dispatch('SET_LOCATION', {city: 'California'})
}

export default detail;

Assuming you have a main or index file that creates your Vue instance, you now likely need to change the import from importing the create function to simply importing the store.

answered Oct 12 '17 at 18:45

Bert

80,741
17
199
164

1

I am doing like: import { createStore } from '../store'; const store = createStore(); store.dispatch('SET_LOCATION', {city: 'California'}); but it's not working – Mukund Kumar Oct 12 '17 at 18:51
2

@MukundKumar Don't do that. Just `import store from "./store"`. There is no reason you need to export a function to create the store. Just import the store. If you export a create function and create a store in multiple files, you will end up with multiple stores. – Bert Oct 12 '17 at 18:52
2

but i am wrapping new Vuex.Store() in a createStore function. so it should work. – Mukund Kumar Oct 12 '17 at 18:54
@MukundKumar Do you *want* more than one store? – Bert Oct 12 '17 at 18:55
No, I just want same store, so that i can dispatch one action. – Mukund Kumar Oct 12 '17 at 18:56
@MukundKumar Then you do not want to export a function that creates the store. Here is a working example. https://codesandbox.io/s/pp3q973k6j – Bert Oct 12 '17 at 19:05
5

To anyone else with this issue- if you are using modules, you must import the base store and reference the module via forward slash notation like `store.dispatch('user/markNotificationAsRead', notification);` – parker_codes Jun 13 '19 at 18:52
Whether or not a store creating function is exported or the store itself is exported as an already-created singleton is not important. What matters is the same store that gets created is utilized by both Vue and the separate js file. If you want to create a store with a function, that's fine - you can continue doing that. Just make sure you get the same store into jsfile.js. You can export a function from jsfile.js, which can return an interface after receiving its dependencies as an input (which would include `store`). – dvlsg Jul 01 '19 at 00:47
@dvlsg There's no reason to export a function to create a store unless at some point you want more than one store. OP wanted one store. – Bert Jul 01 '19 at 12:01

How to dispatch action from a javascript file (instead of a vue component)?

1 Answers1