在vue中的axios.js中使用store获取对应的参数

可以使用以下代码获取store中的参数：

import store from '@/store'

// 获取store中的参数
const param = store.state.param

// 使用axios发送请求
axios.get('/api/data', {
params: {
param: param
}
}).then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})

相关问题

在Vue中,怎么使用Vue.js devtools来调用这些监控端点

Vue.js devtools是一个浏览器扩展程序，可以帮助开发者调试Vue.js应用程序。使用Vue.js devtools调用监控端点的步骤如下：

1. 在浏览器中安装Vue.js devtools扩展程序，可以在Chrome Web Store或者Firefox Add-ons中搜索并安装。

2. 在Vue应用程序中安装Vue.js devtools插件，可以使用npm或者yarn命令安装，例如：`npm install --save-dev @vue/devtools`。

3. 启用Vue.js devtools插件，可以在Vue应用程序的入口文件中添加如下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.devtools = true

new Vue({
  render: h => h(App)
}).$mount('#app')

其中，`Vue.config.devtools = true`启用Vue.js devtools插件。

4. 在浏览器中打开Vue.js devtools面板，并切换到“Network”选项卡。

5. 在Vue应用程序中使用axios库调用监控端点，Vue.js devtools会自动捕获HTTP请求，并在“Network”选项卡中显示请求和响应的详细信息。

6. 在Vue.js devtools面板中查看监控数据，可以在“Network”选项卡中找到对应的请求和响应。点击请求或者响应的详情，可以查看请求和响应的详细信息，包括请求URL、请求方法、请求参数、响应状态码、响应头、响应数据等。

7. 在Vue.js devtools面板中调试Vue组件，可以在“Components”选项卡中找到Vue组件并进行调试。可以查看组件的状态、属性、事件等，也可以修改组件的状态和属性，以便进行调试。

已知后端为springboot + security 在数据库在存在user表 表结构为: [ userid authority role username password 1 管理者 admin admins 123456 2 高级管理 user User 654321 3 普通管理 manag Manag 567890 ] 后端登录路径为"/login"； 前端请求封装文件 axios.js为： import axios from "axios"; const system = axios.create({ baseURL:'http://localhost:8088', changeOriging:true, }); export default system; 在vue3中如何利用router store 实现权限登录 不同的账号访问不同的路径 （ 如 账号admin 密码：123456； 账号user 密码abcdef ） 组件内script使用<script setup>

在组件内的`<script setup>`中，可以利用router和store来实现权限登录和不同账号访问不同路径的需求。具体实现步骤如下：

1. 在store中定义一个state，用于存储当前登录用户的信息，例如：

const state = {
  currentUser: null
};

2. 在store中定义一个action，用于处理登录逻辑，例如：

const actions = {
  login({ commit }, { username, password }) {
    return system.post('/login', { username, password }).then(response => {
      const { userid, authority, role } = response.data;
      commit('setCurrentUser', { userid, authority, role });
    });
  }
};

其中，`system`是前面封装好的axios实例，用于发送登录请求。登录成功后，将响应数据中的`userid`、`authority`和`role`存储到state中的`currentUser`中。

3. 在store中定义一个getter，用于获取当前登录用户的角色信息，例如：

const getters = {
  currentUserRole(state) {
    return state.currentUser ? state.currentUser.role : null;
  }
};

4. 在路由配置中，定义需要进行权限控制的路由和对应的角色信息，例如：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { roles: ['admin'] }
  },
  {
    path: '/user',
    component: UserComponent,
    meta: { roles: ['user', 'admin'] }
  },
  {
    path: '/manag',
    component: ManagComponent,
    meta: { roles: ['manag', 'user', 'admin'] }
  }
];

其中，`meta`属性用于存储路由的元数据信息，这里存储了需要访问该路由需要的角色信息。

5. 在路由配置中，定义一个全局前置守卫，用于进行权限校验，例如：

router.beforeEach((to, from, next) => {
  const requiredRoles = to.meta.roles;
  const currentUserRole = store.getters.currentUserRole;
  if (requiredRoles && requiredRoles.indexOf(currentUserRole) === -1) {
    next('/login');
  } else {
    next();
  }
});

该守卫会在每个路由跳转前进行校验，如果当前用户的角色信息不满足路由的要求，就跳转到登录页面。

6. 在组件中，调用store中的登录action进行登录，例如：

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const state = reactive({
  username: '',
  password: ''
});

const router = useRouter();
const store = useStore();

const handleSubmit = () => {
  store.dispatch('login', { username: state.username, password: state.password }).then(() => {
    router.push('/');
  });
};
</script>

这里使用了`reactive`来定义响应式数据，`useRouter`来获取路由实例，`useStore`来获取store实例。当用户提交登录表单时，调用store中的登录action进行登录，并在登录成功后跳转到首页。

以上就是利用router和store实现权限登录和不同账号访问不同路径的步骤，希望能对你有所帮助。