vuex获取不到全局状态

Question

store.getters.permissions和store.getters.code都为undefined
实际上是有值的

import { login, logout, getInfo } from '@/api/login'
// import { getCookie, setCookie, removeCookie } from '@/utils/auth'
// import { userLogin } from "@/utils/request.js";
import { stringify } from 'postcss';
import VueRouter from 'vue-router';
const Qs = require('qs');
// const cookie = document.cookie

const user = {
  state: {
    // cookie: getCookie(),
    code: '',
    name: '',
    avatar: '',
    roles: []
  },

  mutations: {
    SET_COOKIE: (state, cookie) => {
      state.cookie = cookie
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    LOGIN_FLAG: (state, code) => {
      state.code = code
    },
    ROUTER_DATA: (state, permissions) => {
      state.permissions = permissions
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      // console.log('======点击了登录按钮========')
      const username = userInfo.username.trim()
      const password = userInfo.password
      const data1 = {
        username: username,
        password: password
      }
      let qsDATA = Qs.stringify(data1)   //利用Qs插件使JSON数据转换为后台所需的Formdata数据
      console.log(qsDATA, '---------qsDATA----------')

      return new Promise((resolve, reject) => {
        console.log('======登录按钮Promise========')
        login(qsDATA).then(data => {
          console.log(data, '-----------Login data-------------')
          const code = data.code
          const permissions = data.content.permissions
          commit('LOGIN_FLAG', code)
          commit('ROUTER_DATA', permissions)
          console.log(permissions, '--------data.content.permissions----------')
          resolve()
        }).catch(error => {
          console.log('===========catch==========')
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.cookie).then(response => {
          const data = response
          console.log(data, '-----------GetInfo data-------------')
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', data.roles)
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
          // commit('SET_COOKIE', '')
          // commit('SET_ROLES', [])
          commit('LOGIN_FLAG', '')
          // removeCookie()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        // commit('LOGIN_FLAG','')
        resolve()
      })
    }
  }
}

export default user

import router from './router'
// import { Message } from 'element-ui'
import store from './store'
import axios from 'axios'
const _import = require('./router/_import_' + process.env.NODE_ENV)//获取组件的方法
import Layout from '@/views/layout/Layout' //Layout 是架构组件，不在后台返回，在文件里单独引入

var getRouter //用来获取后台拿到的路由

router.beforeEach((to, from, next) => {
  if (!getRouter) {//不加这个判断，路由会陷入死循环
    if (!getObjArr('router')) {
      axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
      console.log('if')
      console.log(store.getters.permissions, '--------vuex permissions--------')
      console.log(store.getters.code, '--------vuex code--------')
      getRouter = res.data.data.router//后台拿到路由
        saveObjArr('router', getRouter) //存储路由到localStorage
        routerGo(to, next)//执行路由跳转方法
      })
    } else {//从localStorage拿到了路由
      getRouter = getObjArr('router')//拿到路由
      console.log('else')
      console.log(store.getters.permissions, '--------vuex permissions--------')
      console.log(store.getters.code, '--------vuex code--------')
      routerGo(to, next)
    }
  } else {
    next()
  }
  
  // if(!getRouter) {
  //   if ()
  // }
  
})


function routerGo(to, next) {
  getRouter = filterAsyncRouter(getRouter) //过滤路由
  router.addRoutes(getRouter) //动态添加路由
  global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
  next({ ...to, replace: true })
}

function saveObjArr(name, data) { //localStorage 存储数组对象的方法
  localStorage.setItem(name, JSON.stringify(data))
}

function getObjArr(name) { //localStorage 获取数组对象的方法
  return JSON.parse(window.localStorage.getItem(name));

}

function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {//Layout组件特殊处理
        route.component = Layout
      } else {
        route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })

  return accessedRouters
}

Answer 1

你的getter呢？并且是要return的

Answer 2

在你的store里面也没有getters啊 store.state.code你可以试一试。你要是想用getters需要你自己写。