web-dev-qa-db-fra.com

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

Je travaille avec vuex (2.1.1) et je fais fonctionner les choses au sein de vue composants de fichier unique. Cependant, pour éviter trop de corruption dans mon vue composant de fichier unique) J'ai déplacé certaines fonctions vers un utils.js module que j'importe dans le fichier vue. Dans ce utils.js Je voudrais lire l'état de vuex. Comment puis je faire ça? Comme il semble que l'approche de l'état avec des getters, etc. suppose que vous travaillez à l'intérieur d'un composant vue, ou non?

J'ai essayé de import state from '../store/modules/myvuexmodule' puis reportez-vous à state.mystateproperty mais cela donne toujours 'undefined', alors que dans la vue-devtools je peux voir que la propriété state a des valeurs appropriées.

Mon estimation à ce stade est que ce n'est tout simplement pas `` le chemin à parcourir '' car la valeur state.property dans le fichier js ne sera pas réactive et ne sera donc pas mise à jour ou quelque chose, mais peut-être que quelqu'un peut confirmer/prouver que je me trompe.

javascriptvue.jsvue-componentvuejs2vuex
19
musicformellons

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

voici le fichier js externe:

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

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

Le module d'état:

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
}

Le magasin:

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 renvoyant le AUTH_STATE propriété de authorization variable d'état.

Un composant pour tester:

<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 l'état par défaut est connecté à la console. L'action dans mon cas entraîne un appel API, entraînant un changement d'état si la combinaison nom d'utilisateur - mot de passe avait un enregistrement.

Un cas de réussite entraîne l'affichage de la console dans authState watch, la fonction importée peut imprimer les modifications apportées à l'état.

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

18
Amresh Venugopal

Si vous vous demandez comment accéder à une mutation à partir d'un fichier javascript, vous pouvez effectuer les opérations suivantes:

store.commit('mutation_name', mutation_argument);
0
Nic Scozzaro