安装

npm

npm i vuex

模块化开发

store/index.js

import { createStore } from "vuex";
import user from "./user";

const store = createStore({
    modules: { user }
});

export default store;

store/user.js

export default {
    actions: {
        // 获取用户信息
        getUserInfo(con) {
            // .....发送网络请求，获取数据(data)......
            con.commit('SaveUserInfo', data);
        }
    },
    mutations: {
        // 加工用户信息
        SaveUserInfo(state, data) {
            // .....加工......
            state.userInfo = data;
        }
    },
    state: {
        userInfo: {},       // 用户信息
    },
};

main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

xxx.vue

<template>
    <h3>用户名：{{ userInfo.nickname }}</h3>
    <h3>年龄：{{ userInfo.age }}</h3>
</template>

<script>
    import { toRefs } from "vue";
    import { useStore } from "vuex";
    export default {
        setup() {
            const store = useStore();
            store.dispatch('getUserInfo');
            return { ...toRefs(store.state.user) }
        }
    }
</script>