代码之家 › 专栏 › 技术社区 › DarkFenix

访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

vuex vue-router vue.js

DarkFenix · 技术社区 · 6 年前

我试图验证用户是否经过身份验证,能够访问定向的路由,否则重定向到登录路由,问题是我不知道如何执行 fetchUser 来自我的操作 beforeEach .换句话说,我无法访问 来自路由器的getter 剧本

百货商店js公司

import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
    state: {
        isLoggedIn: !!localStorage.getItem("token"),
        user_data : localStorage.getItem("user_data"),
    },
    getters ,
    mutations,
    actions
}

路由/索引。js公司

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import routes from './rutas';
import store from '../store/';
const router = new VueRouter({
  mode : 'history',
  routes 
})

router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.isLoggedIn)  {
            next({path: '/login'})
        }
        else {
            store.dispatch('fetchUser') // Line error
            next()
        }
    } 
    else {
        next() // make sure to always call next()!
    }
})

获得者。js公司

export default {
    isLoggedIn: state => {
        return state.isLoggedIn
    },
    user_name  : state =>{
        if(! _.isEmpty(this.user_data))
            return JSON.parse(state.user_data).name
        return '';
    },
    isEmptyUser : state =>{
        return  _.isEmpty(this.user_data);
    },
    isAdmin: state => {
        if(! _.isEmpty(this.user_data)) return state.user_data.nivel===1
        return false;
    }
}

行动。js公司

 export default {
 /* more methods*/

 , async fetchUser({ commit }) {
    return await axios.post('/api/auth/me')
        .then(res => {   
            setTimeout(() => {
                localStorage.setItem("user_data", JSON.stringify(res.data)); 
                Promise.resolve(res.data); 
            }, 1000);             
        },
        error => {                  
            Promise.reject(error);          
        });
}

这将在控制台中返回错误:

_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuuu。a、调度不是一项功能

我该怎么做,或者方法是错误的,我不应该直接访问操作?

1 回复 | 直到 6 年前

acdcjunior Mukul Kumar 6 年前

问题是你的 store 不是实际的存储对象,它只是用于生成它的对象。

解决方案是将文件导出到实际存储:

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex); // added here
export default new Vuex.Store({  // changed here
    state: {
        isLoggedIn: !!localStorage.getItem("token"),
        user_data : localStorage.getItem("user_data"),
    },
    getters ,
    mutations,
    actions
})  // changed here

现在你的路由器代码可以工作了。

你必须意识到的是,可能在你的主要领域。js,您已经像上面一样初始化了存储。例如:

import store from '../store/';
new Vue({
  store: new Vuex.Store(store),
  // ...
})

现在,您必须删除该初始化并直接使用存储:

import store from '../store/';
new Vue({
  store: store, // or simply store
  // ...
})

一切都应该很好。

访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、 调度不是一项功能

访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能