How to get Vuex mutation access in a js file outside of vue components.

[JesseRatt]

Hello,
I have a file called functions.js that has a lot of generic, reused functions in my app. It is not a Vue component. It has worked fine until now, where I need to commit a mutation to Vuex when something is done in this function.

my vuex store:

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },
    state: {
      myThing: '',
    },
    mutations: {
      setMyThing(state, newThing) {
        state.myThing = newThing;
      },
    },
    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEBUGGING,
  });

  return Store;
}

My functions.js:

import store from '../../../../src/store/index';

export function setTheNewThing(newData) {
  store.commit('setMyThing', newData);
}

This is where I call it in a component:

import '../functions/functions';
...
  created() {
    setTheNewThing('set');
    this.newValue = this.$store.state.myThing;
  },

When I call setTheNewThing in a vue component (mounted),
it throws:
TypeError: _store_index__WEBPACK_IMPORTED_MODULE_8__.default.commit is not a function

I could sort of hack it by passing $this.store into my setTheNewThing (which might be OK for testing actually), or I could just return the data and set it to Vuex out here in the created() where it has valid context, but it just feels like there should be a way to get the Vuex store into non-vue a function javascript file like this.

[TobyMosque]

use injection:

export function setTheNewThing(store, newData) {
  store.commit('setMyThing', newData);
}

[JesseRatt]

This is what I currently have, but it just didn't seem like the right way to do it, but I guess there is nothing wrong with that?

[metalsadman]

if you're not using ssr then just export your store context. ie:

// src/store/index.js
let store = null
export default function () {
  store = new Vuex.Store({
  ...
  return store
}

export { store }
// somejsfile.js
import { store } from 'indexstorepath