24 vue3使用vuex--- actions的使用

Jay丶萧邦

已于 2022-03-10 17:49:48 修改

阅读量5.7k

点赞数 3

分类专栏： vue3 文章标签： javascript 开发语言 ecmascript

于 2022-03-08 22:30:00 首次发布

本文链接：https://blog.csdn.net/qq_42543244/article/details/123358288

版权

vue3 专栏收录该内容

40 篇文章

订阅专栏

这篇博客介绍了如何在Vue3中使用Vuex进行模块化管理，特别是关于用户角色的获取。通过actions异步获取用户角色，并通过mutations设置到状态中，最后在页面组件中展示并允许用户触发角色获取操作。示例代码详细展示了store的配置和Vue组件中如何调用Vuex的action及使用computed属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

紧接上篇：

本篇记录vue3 vuex actions的使用，默认进行了模块化的管理，开启了命名空间

user.js

const user = {
    namespaced: true,  //开启命名空间 建议开启
    state: {
        name: '',
        token: 'token 123456789',
        sex: 2,   //0=>代表女 | 1=>代表男 | 2=>代表保密
        role: null  //用户角色
    },
    mutations: {
        setUserRole(state, role) {
            state.role = role
        }
    },
    actions: {
        async getUserRole({state, commit}, payload) {
            function httpRole(data) {
                console.log('请求参数===>', data) //模拟请求参数
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(['admin', 'add'])
                    }, 300)
                })
            }

            let resp = await httpRole({token: state.token, id: payload})  //模拟请求
            commit('setUserRole', resp)
        }
    }
}

export default user

index.js

import {createStore} from 'vuex'

import user from "./modules/user";

// 创建一个新的 store 实例
const store = createStore({
    strict: process.env.NODE_ENV !== 'production',  //在开发状态下开启严格模式
    modules: {
        user
    }
})

export default store

页面，Test.vue

<template>
  <div>{{ role }}</div>
  <button @click="getRole">获取当前用户角色</button>
</template>

<script>
import {computed} from 'vue'
import {useStore} from "vuex"

export default {
  name: "Test",
  setup() {
    let {state, dispatch} = useStore();

    function getRole() {
      dispatch('user/getUserRole', 999)
    }

    return {
      role: computed(() => state.user.role),
      getRole
    }
  }
}
</script>

点击获取用户角色按钮：