javascript - tutorial - vuex español

Cómo obtener el estado vuex desde un archivo javascript(en lugar de un componente vue)

Question

Estoy trabajando con vuex (2.1.1) y hago que las cosas funcionen dentro de los componentes del archivo único vue. Sin embargo, para evitar demasiados errores en mi componente de archivo único vue moví algunas funciones a un módulo utils.js que utils.js en el archivo vue. En este utils.js me gustaría leer el estado vuex. ¿Cómo puedo hacer eso? Como parece acercarse al estado con captadores, etc. presume que está trabajando desde dentro de un componente vue, ¿o no?

Traté de import state from ''../store/modules/myvuexmodule'' y luego referirme a state.mystateproperty pero siempre da ''undefined'', mientras que en el vue-devtools puedo ver que la propiedad state tiene los valores adecuados.

Mi estimación en este punto es que simplemente no es ''el camino a seguir'' ya que el valor de propiedad del estado dentro del archivo js no será reactivo y, por lo tanto, no se actualizará o algo así, pero tal vez alguien pueda confirmar / probar que estoy equivocado.

Answer 1

Es posible acceder a la tienda como un objeto en un archivo js externo, también he agregado una prueba para demostrar los cambios en el estado.

aquí está el archivo js externo:

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

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

El módulo de estado:

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

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

Vue.use(Vuex)

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

Hasta ahora, todo lo que he hecho es crear un archivo js que exporta una función que devuelve la propiedad AUTH_STATE de la variable de estado de authorization .

Un componente para probar:

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

En el botón, haga clic en estado predeterminado para iniciar sesión en la consola. La acción en mi caso da como resultado una llamada de API, lo que da como resultado un cambio de estado si la combinación de nombre de usuario y contraseña tiene un registro.

Un caso de éxito da como resultado mostrar la consola en el reloj authState , la función importada puede imprimir los cambios realizados en el estado.

Del mismo modo, en un caso de falla, el reloj en authError mostrará los cambios realizados en el estado