Vue3全局状态管理之Vuex配置

痴呆青年荣

已于 2022-07-02 09:28:24 修改

阅读量744

点赞数

文章标签：前端 javascript vue.js

于 2022-07-02 09:08:20 首次发布

本文链接：https://blog.csdn.net/qq_52777941/article/details/125568744

版权

本文介绍如何在Vue3中设置和使用Vuex状态管理。包括如何导入createStore、配置actions、mutations、state和modules，以及在组件中通过useStore进行状态管理。

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

Vue3需要从vuex中导入createStore，通过createStore去创建并导出

import {createStore} from 'vuex'

export default createStore({
    actions:{

    },
    mutations:{

    },
    state:{

    },
    modules:{
        
    }
})

main.js中引入

import store from './store/index'

const app = createApp(App)
app.use(store)

在组件中使用，需要通过userStore创建变量启用

<script>
import { useStore } from 'vuex';

export default {
  setup(){
    //创建store变量
    const store = useStore();
    //通过store变量操作
    
    return {

    }
  }
  
};
</script>

其余用法与vue2一致