How to get vuex state from javascript file (instead of vue component)

Question

I work with vuex (2.1.1) and get everything that works in vue separate file components. However, in order to avoid too much steepness in one vue component, I moved some functions to the utils.js module, which I import into a vue file. In this utils.js I would like to read the state of vuex. How can i do this? It seems that approaching the state with getters, etc. Assumes you are working from a vue component or not?

I tried import state from '../store/modules/myvuexmodule' and then refer to state.mystateproperty , but always gives 'undefined', whereas in vue-devtools I see that the state property has the correct values.

My assessment at this point is that this is simply not a “path”, since the value of state.property in the js file will not be responsive and thus will not be updated or anything like that, but maybe someone it can confirm / prove to me wrong.

Answer 1

You can access the repository as an object in an external js file, I also added a test to demonstrate state changes.

here is the external js file:

 import { store } from '../store/store' export function getAuth () { return store.state.authorization.AUTH_STATE } 

Status Module:

 import * as NameSpace from '../NameSpace' /* Import everything in NameSpace.js as an object. call that object NameSpace. NameSpace exports const strings. */ import { ParseService } from '../../Services/parse' const state = { [NameSpace.AUTH_STATE]: { auth: {}, error: null } } const getters = { [NameSpace.AUTH_GETTER]: state => { return state[NameSpace.AUTH_STATE] } } const mutations = { [NameSpace.AUTH_MUTATION]: (state, payload) => { state[NameSpace.AUTH_STATE] = payload } } const actions = { [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => { ParseService.login(payload.username, payload.password) .then((user) => { commit(NameSpace.AUTH_MUTATION, {auth: user, error: null}) }) .catch((error) => { commit(NameSpace.AUTH_MUTATION, {auth: [], error: error}) }) } export default { state, getters, mutations, actions } 

Score:

 import Vue from 'vue' import Vuex from 'vuex' import authorization from './modules/authorization' Vue.use(Vuex) export const store = new Vuex.Store({ modules: { authorization } }) 

So far, all I have done is create a js file that exports a function that returns the AUTH_STATE property of the authorization state variable.

Component for testing:

 <template lang="html"> <label class="login-label" for="username">Username <input class="login-input-field" type="text" name="username" v-model="username"> </label> <label class="login-label" for="password" style="margin-top">Password <input class="login-input-field" type="password" name="username" v-model="password"> </label> <button class="login-submit-btn primary-green-bg" type="button" @click="login(username, password)">Login</button> </template> <script> import { mapActions, mapGetters } from 'vuex' import * as NameSpace from '../../store/NameSpace' import { getAuth } from '../../Services/test' export default { data () { return { username: '', password: '' } }, computed: { ...mapGetters({ authStateObject: NameSpace.AUTH_GETTER }), authState () { return this.authStateObject.auth }, authError () { return this.authStateObject.error } }, watch: { authError () { console.log('watch: ', getAuth()) // ------------------------- [3] } }, authState () { if (this.authState.sessionToken) { console.log('watch: ', getAuth()) // ------------------------- [2] } }, methods: { ...mapActions({ authorize: NameSpace.ASYNC_AUTH_ACTION }), login (username, password) { this.authorize({username, password}) console.log(getAuth()) // ---------------------------[1] } } } </script> 

When you click the "Default Status" button, you are logged into the console. The action in my case leads to an api call, as a result of which the state changes if the combination of username and password had an entry.

A success case results in the console displaying in the authState watch; an imported function can print changes made to the state.

Similarly, in the event of a failure, the clock on authError will show the changes made to the state

Answer 2

For those who are interested in how to access the mutation from a JavaScript file, you can do the following:

 store.commit('mutation_name', mutation_argument);