从 store/index.js 内部访问 vuex 突变的问题

Question

谦虚地说，我承认我是 gleaning from SAVuegram 为我的应用设置身份验证。我正在运行 Firebase 的 onAuthStateChanged 以确保用户在页面刷新期间保持登录状态，但是我完全无法访问函数内部的状态，收到以下错误。

（$store 只是我在测试“$store”和“store”时截取的截图 - 两者都坏了。）

启用严格调试后，我还会收到警告我在突变处理程序之外发生突变的消息，但这不是我正在做的吗？

这是我的商店/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import fb from '../components/firebase/firebaseInit'
import createLogger from 'vuex/dist/logger'

// import dataRefs from './dataRefs'
// import pageTitle from './modules/pageTitle'
import auth from './modules/auth'
import apps from './modules/applicants'

Vue.use(Vuex)

fb.auth.onAuthStateChanged(user => {
    if (user) {
      // here I can access the user object but never the following "store"
      console.log("FB AUTH", user);
      store.commit('setCurrentUser', user)
      store.dispatch('fetchUserProfile')
    }
});

const debug = process.env.NODE_ENV !== 'production'

const createStore = () => {
  return new Vuex.Store({

    state: {
        pageTitle: '',
        currentUser: null,
        userProfile: null
      },

    mutations: {

      changePageTitle(state, newTitle) {
        state.pageTitle = newTitle
      },

      changeSnackBarMessage(state, newMessage) {
        state.snackBarMessage = newMessage
      },

      // POPUPS
      changeAdvisorAddAppPopupStatus(state) {
        state.showAdvisorAddPopup = !state.showAdvisorAddPopup
      },

      setToken(state, token) {
        state.token = token;
      },

      setUser(state, userObj) {
        state.user.email = userObj.email;
        state.user.fbUUID = userObj.uuid;
      }
    },

  actions: {
      updatePageTitle(vuexContext, newTitle) {
        vuexContext.commit('changePageTitle', newTitle);
      },
      updateSnackBarMessage(vuexContext, newMessage) {
        vuexContext.commit('changeSnackBarMessage', newMessage);
      },
      toggleAdvisorAddPopup(vuexContext) {
        vuexContext.changeAdvisorAddAppPopupStatus
      },
  },

    modules: {
    auth,
    apps
    },
    strict: debug,
    plugins: debug ? [createLogger()] : []
  })
};
export default createStore;

仅供参考，我也尝试使用 export const store = new Vuex.Store({ 而不是 const create ... 方法来实例化我的商店，但随后 Vuex 显示我的状态、动作、getter 或突变都找不到。

感谢您的帮助。

Answer 1

为什么要在函数中创建商店？

const createStore = () => {

我就是这么干的：

const store = new Vuex.Store({
    state: {},

    mutations: {},

    actions: {},

    modules: {
       auth,
       apps
    },
    strict: debug,
    plugins: debug ? [createLogger()] : []
  })
};

export default store;

我现在可以访问商店了。