设置公共变量

主题:公共变量的设置   

   实现《机房收费系统》的过程中,为了记录开始时登录的用户,我们会使用公共变量。公共变量,顾名思义,大家都可以调用的变量,只需要声明一次,以后使用时直接赋值或调用即可。就像我们城市中使用的公共自行车(在廊坊还没有试行,我们去山东实习的时候看见山东已经试行成功)。它的使用原则就是:不管用不用这个公共自行车,它就在那里,不离不弃。等我用时(使用公共变量),只需刷卡记录(赋值给实体,供程序调用),即可骑走,骑完后不用放回原处(程序结束后自动释放变量),直接锁在另一个停放公共自行车的地方,再次刷卡记录即可,不影响其他人使用这辆自行车(变量可在下次登录时再赋新值)。

               

   这次向大家解释在《机房收费系统》设置公共变量的两种方法,如下:

1、使用shared

   1>在实体层EntityLogin中声明 

   public shared User as string 


   2>登录时记录

   User = Val(txtUserName.Text.Trim())
   将用户登录的值赋值给实体层EntityLogin.UserName的同时,赋值给公共变量。设置此公共变量,不干扰在实体层EntityLogin中为UserName设置属性,两个部分是分开的。

   

   3>使用公共变量

   其他实体类,比如EntityModifyPW(修改用户密码实体类,在我的机房重构中,将修改密码和登录设置了两个实体类)要使用这个变量时,在U层(frmAmend)中调用即可: 
   UserInfo.UserName = EntityLogin.User

   User便是我们为实体类之间传递数据的桥梁,关于shared的其他知识,向大家推荐:

   http://blog.youkuaiyun.com/onlybymyself/article/details/44726719

https://msdn.microsoft.com/zh-cn/library/zc2b427x(v=vs.110).aspx

   

2、使用公共模块

   在我们实现第一版《机房收费系统》时,也设置了公共变量,不过并没有使用shared,而是直接使用公共模块Module。
   因为之前的经验,在公共模块中使用很简单。在Module模块中直接写:
    Public UserName As String

   再进行赋值,就可以调用了。

小结:   

    使用公共模块,就相当于将public shared User as string 换了个存放位置,用起来还是一样一样哒!

### 在 Vue 3 中使用 Pinia 定义和管理公共变量的最佳实践 在 Vue 3 中,Pinia 是推荐的状态管理库,用于定义和管理公共变量。以下是一个详细的说明,涵盖如何定义、配置和使用公共变量。 #### 1. 创建 Pinia 实例并启用持久化存储 为了确保公共变量可以在页面刷新后仍然保留,可以使用 `pinia-plugin-persistedstate` 插件来实现状态持久化[^1]。以下是创建 Pinia 实例的代码示例: ```javascript // store/index.js import { createPinia } from "pinia"; import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; const pinia = createPinia(); pinia.use(piniaPluginPersistedstate); export default pinia; ``` #### 2. 定义 Store 并设置公共变量 通过 `defineStore` 方法定义一个 store,并在其中声明公共变量。这些变量可以通过 `state` 属性进行初始化,并通过 `getters` 和 `actions` 提供额外的功能[^2]。例如: ```javascript // store/user.js import { defineStore } from "pinia"; export const useUserStore = defineStore({ id: "user", // 唯一标识符 state: () => ({ name: "Guest", // 默认用户名 age: 0, // 默认年龄 isLoggedIn: false, // 登录状态 }), getters: { isAdult(state) { return state.age >= 18; // 判断是否成年 }, }, actions: { login(name, age) { this.name = name; this.age = age; this.isLoggedIn = true; }, logout() { this.name = "Guest"; this.age = 0; this.isLoggedIn = false; }, }, persist: true, // 启用持久化存储 }); ``` #### 3. 在组件中使用公共变量 在 Vue 组件中,可以通过 `useUserStore` 方法访问 store 中的公共变量,并调用其方法或读取其值[^2]。例如: ```vue <template> <div> <p v-if="isLoggedIn">欢迎,{{ name }}!</p> <p v-else>请登录。</p> <button @click="handleLogin">登录</button> <button @click="handleLogout" v-if="isLoggedIn">注销</button> </div> </template> <script setup> import { useUserStore } from "@/store/user"; const userStore = useUserStore(); function handleLogin() { userStore.login("Alice", 25); } function handleLogout() { userStore.logout(); } // 将 store 中的变量映射到组件中 const { name, isLoggedIn } = userStore; </script> ``` #### 4. 使用组合式写法定义复杂逻辑 对于需要更复杂逻辑的场景,可以使用组合式写法定义 store。这种方式允许直接返回响应式变量和方法。例如: ```javascript // store/todo.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useTodoStore = defineStore("todo", () => { const todoArr = ref([ { id: 1, title: "任务1" }, { id: 2, title: "任务2" }, ]); const totalTodos = computed(() => todoArr.value.length); function addTodo(title) { const newId = todoArr.value.length + 1; todoArr.value.push({ id: newId, title }); } return { todoArr, totalTodos, addTodo }; }); ``` #### 5. Pinia 的优势与 Vuex 的对比 与 Vuex 相比,Pinia 提供了更简单的 API,支持 Composition API 风格,并且对 TypeScript 的支持更加友好[^3]。此外,Pinia 不再需要复杂的模块嵌套结构和命名空间概念,使得状态管理更加直观和易于维护。 --- ### 注意事项 - 确保每个 store 的 `id` 是唯一的,以避免冲突。 - 如果不需要持久化存储,可以省略 `persist: true` 配置。 - 在大型项目中,建议将不同的功能模块拆分为多个 store,以便于管理和维护。 ---
评论 54
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小王师傅66

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值