Comment obtenir vuex état à partir d'un fichier javascript (au lieu d'une vue de composant)

Il est possible d'accéder à la banque en tant qu'objet dans un fichier js externe, j'ai également ajouté un test pour démontrer les changements dans l'état.

voici le fichier js externe:

import { store } from '../store/store'

export function getAuth () {
  return store.state.authorization.AUTH_STATE
}

L'état du 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
}

La boutique:

import Vue from 'vue'
import Vuex from 'vuex'
import authorization from './modules/authorization'

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: {         
    authorization    
  }                  
})                   

Jusqu'à présent tout ce que j'ai fait est de créer un fichier js qui exporte une fonction retournant la AUTH_STATE propriété de authorization variable d'état.

Un composant pour le test:

<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>

Sur le bouton cliquez sur par défaut est connecté à la console. L'action dans mon cas, les résultats dans un appel d'api, ce qui entraîne un changement d'état si le nom d'utilisateur - mot de passe a un dossier.

Un cas de réussite résultats en montrant la console dans authState watch, la fonction importée pouvez imprimer les modifications apportées à l'état.

De même, à un cas d'échec, la montre sur authError affichera les modifications apportées à l'état