vue使用store对某个字段值进行全局存储和使用

一、需求描述:

需要对字段:项目编号projectId进行全局存储,在给projectId设置一个值后,其他vue页面中的projectId字段可以获取该值。

二、代码:

1.字段值设置.vue文件:

①引入设置变量方法:

import { setStore } from "@/util/store";

②设置projectId值

    handleOpen(projectName, projectId) { //点击项目名称触发,参数为该项目的名称和projectId
      setStore({
        name: "projectId",  //其他页面引用getStore时使用的参数名
        content: projectId,  //给name中参数名赋值,值为handleOpen的传参
      });     
      this.$router.push({ path: `/fgdm/project?name=${projectName}` });
    },
  },

2.字段值使用.vue文件

①引入获取变量方法

import { getStore } from "@/util/store";

②获取projectId值

该OnLoad方法为打开页面的加载方法,需要先获取store中的projectId值,作为参数返回给列表获取函数:getList;在后台的getList方法中获取参数projectId;在sql语句中加入projectId的判别;即可实现当前页面仅展示store中projectId值相对应的数据。

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,可以使用< script setup>标签来编写组件逻辑。为了实现权限登录,我们可以使用Vue Router和Vuex Store来管理用户身份验证和路由访问。 首先,我们需要在Store中定义一个状态,用于保存当前登录用户的信息。例如: ```javascript import { createStore } from 'vuex' export default createStore({ state: { currentUser: null }, mutations: { login(state, user) { state.currentUser = user }, logout(state) { state.currentUser = null } } }) ``` 在登录成功后,我们可以通过调用login mutation将当前用户信息保存到Store中。 其次,我们需要在路由配置中定义各个路由的访问权限。例如,我们可以在路由元数据中定义一个requiredAuth字段,用于标识该路由是否需要登录才能访问: ```javascript import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: Home, meta: { requiredAuth: true } }, { path: '/login', name: 'Login', component: Login }, //... ] const router = createRouter({ history: createWebHistory(), routes }) ``` 接下来,我们可以在全局前置守卫中检查当前用户是否已经登录,并且是否具有访问该路由的权限。如果未登录或没有权限,则重定向到登录页面。 ```javascript router.beforeEach((to, from, next) => { const currentUser = store.state.currentUser const requiresAuth = to.matched.some(record => record.meta.requiredAuth) if (requiresAuth && !currentUser) { next('/login') } else { next() } }) ``` 最后,在< script setup>标签中,我们可以通过$router和$store来访问Vue Router和Vuex Store。例如,我们可以在Login组件中提交登录请求,并将当前用户信息保存到Store中。 ```html <template> <div> <form @submit.prevent="login"> <input type="text" v-model="username" placeholder="Username"> <input type="password" v-model="password" placeholder="Password"> <button type="submit">Login</button> </form> </div> </template> <script setup> import { ref } from 'vue' const username = ref('') const password = ref('') const login = () => { // Submit login request api.login(username.value, password.value).then(user => { // Save current user to store store.commit('login', user) // Redirect to home page router.push('/') }) } </script> ``` 上述代码中,我们使用了ref函数来创建响应式变量,然后在登录方法中提交登录请求,并将当前用户信息保存到Store中。最后,我们使用router.push方法来重定向到主页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值