router.js中的Vue js“未定义商店”答案

【问题标题】：Vue js "store is not defined" in router.jsrouter.js中的Vue js“未定义商店”
【发布时间】：2019-12-09 12:55:47
【问题描述】：

我想执行重定向，但在重定向发生之前，我想使用 store.dispatch 执行操作。错误是控制台中的“未定义存储”。

我尝试将整行代码放在一个变量中并检查是否为 true，如果为 null，则错误消失但操作从未被调用，并且调试器显示 vue 正在跳过 if 语句。


import Vue from 'vue'
import store from './store/index'
import Router from 'vue-router'
import Settings from './views/Settings.vue'


Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/myPath',
            name: 'myPathName',
            component: {},
            beforeEnter(to, from, next) {
                //STORE is not defined
                store.dispatch("path/MY_ACTION");
                    next({
                        name: "destinationPath", 
                    })
            }
        }
-----------------------------------------------------------------------------
MY STORE
// STORE -> MODULES -> CONFIGURATION -> INDEX
import windowsModule from "../windows/index"
import mainDoorModule from "../maindoor/index"
import doorLeavesModule from "../doorleaves/index"
import doorModule from "../door/index"
import actions from "./actions"
import mutations from "./mutations"

export default {
    namespaced: true,
    modules: {
        windows: windowsModule,
        mainDoor: mainDoorModule,
        doorLeaves: doorLeavesModule,
        door: doorModule
    },
    state: {
        configurationId: 0,
        savedConfigurationsViewModel: [],
        errors: {},
        configurationsToSend: []
    },
    mutations,
    actions
}

//THE ACTION I AM TRYING TO REACH INSIDE ACTIONS
// STORE -> MODULES -> CONFIGURATION -> ACTIONS 

GET_DEFAULT_CONFIGURATION({ commit }) {
    commit('SET_CONFIGURATION', {
        //DATA
    }
}

【问题讨论】：

试试this.$store.dispatch
感谢您的回答！仍然未定义。
用更大的片段更新你的代码，因为如果它不是组件而是主模块，可能意味着你安装不正确。
显示你的store
@Gander 所以我添加了一些进口商品，但我真的不知道展示什么有意义。感谢您的回答！

标签： javascript vue.js vuex vue-router

【解决方案1】：

您需要将它安装在主组件中。然后你通过this.$store 参考这个。阅读 Vuex 文档。

export const store = new Vuex.Store({
  state: {},
  mutations: {},
  getters: {}
})

import store from './store/index'

new Vue({
  store, // <- here
  el: '#app'
})

【讨论】：

【解决方案2】：

所以解决了。这是一个 Chrome 错误，说商店未定义，它在 webpack 中。商店已定义。问题在于发送不匹配类型的有效负载的动作和突变之间的不匹配。

谢谢大家的回答，谢谢。

【讨论】：