vue3 vuex使用与详情

最新推荐文章于 2025-05-21 13:58:53 发布

前端-小鑫

最新推荐文章于 2025-05-21 13:58:53 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43876728/article/details/119179910

Vue3 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用Vue CLI创建一个包含Vuex的状态管理项目。Vuex的store模块包括state、mutations、actions和modules。在组件中，通过`useStore`获取store并使用`toRefs`跟踪state的变化。点击事件触发`hanleClick`方法，调用`store.dispatch`来获取数据。此示例展示了Vuex如何在Vue应用中管理和更新状态。

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

使用vue-cli后选择需要vuex 将会生成一个store ，目录格式如下，如不清楚store，mutations，action，module 等可以去查阅文章Vuex

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

获取相应值以及更改值

<template>
    <div @click="hanleClick"></div>
</template>
<script>
import {useStore} from 'vuex'
import {toRefs} from 'vue'
export default{
    setup(){
        const store=useStore()
        const {context}=toRefs(store.state)
        const hanleClick=()=>{
            store.dispatch('getData')
        }
        return {context,hanleClick}
    }
}
</script>