首页 > 其他分享 >vue-element store undefined

vue-element store undefined

时间:2023-08-01 12:37:46浏览次数:44  
标签:vue undefined getters requestUrl axios myconfig import store

使用vue-element-admin时,

想在项目打包后,也能通过修改配置文件来更改接口地址等信息

然后搜索得知,可以在public中写一个config.js

window.myconfig = {
  systemName: '信息管理系统',
  requestUrl: 'http://118.xx.xx.77:8000/admin/',
}

然后在index.html中引入

<script type="text/javascript" src="config.js"></script>

之后使用vuex,在getters.js中写

const getters = {
  myconfig: () => window.myconfig
}
export default getters

然后在request.js中获取store.getters.myconfig.requestUrl的信息

但是在request.js中的axios.create上边写store是获取不到的,undefined

经过搜索是因为https://blog.csdn.net/weixin_41721295/article/details/121037017   这篇文章说的原因,但是不知道具体怎么改,然后就在request.js中进行了一些愚笨的处理

写了个teste方法,在这里面初始化一下store,然后返回给axios.create使用

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import publicConfig from '/public/source/js/config'
function teste(){
  Vue.use(Vuex)
  const aaa = new Vuex.Store({
    getters
  })
  console.log('store',aaa.getters.myconfig.requestUrl)
  return aaa.getters.myconfig.requestUrl
}
// create an axios instance
const service = axios.create({
  // baseURL: publicConfig.requestUrl || 'http://shuju.me/admin/', // process.env.VUE_APP_BASE_API, // url = base url + request url
  baseURL: teste(),
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 30000 // request timeout
})

如果有大佬遇到这个问题,并能优雅地解决,麻烦留言,谢谢

标签:vue,undefined,getters,requestUrl,axios,myconfig,import,store
From: https://blog.51cto.com/u_15668841/6919279

相关文章

  • 智慧校园源码:vue2+Java+springboot+MySQL+elmentui+jpa+jwt
    智慧校园综合管理云平台源码系统主要以校园安全、智慧校园综合管理云平台为核心,以智慧班牌为学生智慧之窗,以移动管理平台、家校沟通为辅。教师—家长一学校—学生循环的无纸化管理模式及教学服务,实现多领域的信息互联互通以及校园管理一体化、信息数据化、数据自动化。智慧班牌融合......
  • vue + ele 下拉选择框和下拉多选选择框处理
    效果图如下: <!--添加项目的弹框--><el-dialogv-model="addDlg"class="pro_dialog"title="添加项目"width="40%"> <el-form:model="addForm"> <el-form-itemlabel="项目名"><el-inputv-......
  • vue 使用 eruda(移动端H5调试工具)
    <scriptsrc="https://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.min.js"></script><script>eruda.init()</script> ......
  • vue中使用provide和inject依赖注入组件之间进行父子组件传值(也适用于嵌套路由)
      父组件中:provide:function(){return{reload:this.reload//父组件中的方法}}子组件中:inject:['reload']使用:this.reload()//也可传入参数......
  • vue-scrollmagic 滚动动画制作插件
     1、需求:在做网站的时候、需要加一个根据页面滚动位置进行页面变化的效果。2、实现方案:自己写个滚动监听也不是很复杂、但是管理维护起来比较乱。所以直接找了这个插件官网:vue-scrollmagic、插件地址3、使用:安装npmivue-scrollmagic--save载入//main.jsimportV......
  • vue循环生成echarts图表
    1.效果图2.引入echartsnpminstallecharts--save3.main.js全局引入4.页面data数据是从后台接口中返回的,需要通过watch监听来获取created方法中获取到的数据。用mounted由于是异步调用,是获取不到created中的数据的。4.后台数据我这里是根据实际业务场景返回的map......
  • ruby web 实战(9)-vue 3基础(2)
    目录定位到导入的vue定位到导入的vue使用导入映射表(ImportMaps)来告诉浏览器如何定位到导入的vue:<!doctypehtml><htmllang="zh"><head><metacharset="utf-8"><title>world</title></head><body><scriptt......
  • three.js学习1(vue3)
    1.引入threejsnpminstall--savethree在组件内import*asTHREEfrom'three'2.创建容器创建canvas标签,为3D渲染建立容器<template><div><canvasid="three"></canvas></div></template>3.创建场景 Three.js依赖......
  • vue多选框
    vue多选框多选框(选中传id)效果图点击确定后传入后台id前端具体实现-vue+elementui前台变量首先使用selecctDeptMent方法从后台数据库,查询到所有的部门信息,存入到optionList中然后取出这个部门名称constoptions=ref([])//代码修改/**新增按钮操作*/const......
  • vue实现浏览器端大文件分块上传
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了:上传文件实体类:看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。pub......