Как получить состояние vuex из файла javascript (вместо компонента vue)

Я работаю с vuex (2.1.1) и получаю все, что работает в vue отдельных файловых компонентах. Однако, чтобы избежать слишком большого крутизны в одном компоненте vue, я переместил некоторые функции в модуль utils.js, который я импортирую в vue файл. В этом utils.js я хотел бы прочитать состояние vuex. Как я могу это сделать? Как кажется, приближение к состоянию с геттерами и т.д. Предполагает, что вы работаете из компонента vue или нет?

Я попытался import state from '../store/modules/myvuexmodule', а затем ссылаюсь на state.mystateproperty, но всегда дает 'undefined', тогда как в vue-devtools я вижу, что свойство состояния имеет правильные значения.

Моя оценка на этом этапе заключается в том, что это просто не "путь", поскольку значение state.property в файле js не будет реагирующим и, таким образом, не будет обновляться или что-то в этом роде, но, возможно, кто-то может подтвердить/доказать мне неправильно.

Ответ 1

Можно получить доступ к хранилищу как к объекту во внешнем js файле, я также добавил тест, чтобы продемонстрировать изменения в состоянии.

вот внешний файл js:

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

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

Модуль состояния:

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
}

Магазин:

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

Vue.use(Vuex)

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

До сих пор все, что я сделал, это создать файл js, который экспортирует функцию, возвращающую свойство AUTH_STATE переменной состояния authorization.

Компонент для тестирования:

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

При нажатии кнопки "Состояние по умолчанию" выполняется вход в консоль. Действие в моем случае приводит к вызову api, в результате чего изменяется состояние, если комбинация имени пользователя и пароля имела запись.

Случай успеха приводит к отображению консоли в часах authState, импортированная функция может печатать изменения, внесенные в состояние.

Аналогично, в случае сбоя часы на authError будут показывать изменения, внесенные в состояние

Ответ 2

Для тех, кто интересуется, как получить доступ к мутации из файла JavaScript, вы можете сделать следующее:

store.commit('mutation_name', mutation_argument);