vue3触发store的时机和使用store中的变量

最新推荐文章于 2024-08-07 12:25:01 发布

哟哟-

最新推荐文章于 2024-08-07 12:25:01 发布

阅读量697

点赞数

分类专栏：前端进阶文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_29517595/article/details/134444139

版权

前端进阶专栏收录该内容

58 篇文章 4 订阅

订阅专栏

文章讲述了在Vue项目中如何在特定组件中触发全局变量useStore.setRole()，并在onMounted生命周期的nextTick中设置用户角色。使用pinia存储全局状态，并通过computed在组件间共享。强调了根据业务需求灵活选择触发时机以优化代码结构。

摘要由CSDN通过智能技术生成

在使用Vue的项目中，有这样一种场景：我们需要一个全局变量，但这个触发全局变量的方法又只能在某一个组件中触发，怎么触发呢？触发时机是什么？

假设触发全局变量的方法为：useStore.setRole()，全局存储的角色变量为role，则：

1. 全局变量的触发

理论上，全局事件可以在任何时候触发。对于vue组件，在mounted生命周期中触发是最常见的。在本示例中，我们希望调用该全局变量，获取到用户角色，并根据用户角色来控制一些页面的操作。所以，调用该全局变量的时间是在组件挂在以后，nexttick中执行。代码如下：

onMounted(() => {
    queryList()
    nextTick(() => {
        useStore.setRole()
    })
})

本示例中，我们使用的是vue3框架，所以挂载完成的生命周期名称为onMounted。组件挂载完成后，执行两件事：1. 请求数据queryList()；2.获取用户角色，在nextTick中执行useStore.setRole()方法。

2. 全局事件的方法

在该全局事件中，我们只列举了一个简单的功能：获取用户信息，并保存用户是哪种角色。示例如下：

import Cookies from 'js-cookie'
import { defineStore } from 'pinia';
import Service from '../../api/index';

const useStore = defineStore(
    'user',
    {
        state: () => ({
            loginUserInfo: {},
            isReadonly: false,
            isOperation: false,
            isAdministrator: false
        }),
        actions: {
            setUserState() {
                let addcount = Cookies.get('ad-account')
                Service.getUser(account).then(res => {
                    this.loginUserInfo = data
                    this.isReadonly = data?.role === 0
                    this.isOperation = data?.role === 1
                    this.isAdministrator = data?.role === 2
                })
            },
        }
    }
)
export default useStore

我们使用的pinia来存储全局变量，定义全局事件的方法如上。

3. 使用全局变量

在vue组件中使用全局变量的方法为：

import useStore from '../../store/modules/user'

let isReadOnly = computed(() => useStore().isReadonly)
let isOperation = computed(() => useStore().isOperation)
let isAdministrator = computed(() => useStore().isAdministrator)

在组件中定义了三个变量：isReadOnly、isOperation、isAdministrator，分别通过computed来计算得到变量的值。这样，当组件中没加载并执行一次useStore.setRole()方法，全局定义的isReadonly、isOperation、isAdministrator就会改变，在该组件中自定义的变量也会同步变化，省去了再重复计算的过程。

总结

一些已知的简单或复杂变量，在全局方法执行过程中就计算好。这样可以避免在组件中再次计算，减少vue组件中代码的复杂度；同时，还可以因数据双向绑定或其他因素导致的数据更新不及时的问题。
全局变量何时触发，与业务设计有关。本例中是根据业务设定，需要在组件挂载完成后触发，而在一些场景中，可能需要在路由导航的时候触发、在某些变量发生改变的时候触发，都是有可能的。所以，我们需要根据业务场景的设定，选择合适的时机执行这些事件，灵活编写代码，以提高代码的可读性、简洁性、可用性等。