模块化路径 store/modules/user.js

const ModuleUser = {
    namespaced: true,//开启命名空间
    state: {
        id: "默认ID",
        username: "默认名字",
        photo: "默认头像",
    },
    getters: {
    },
    mutations: {
        updateUser(state,user){
            console.log(user)
            state.id = user.id;
            state.username = user.username;
        },
    },
    actions: {
    },
    modules: {
    }
};
export default ModuleUser;

VUEX store/index.js

import {createStore} from 'vuex'
import user from './modules/user'
export default createStore{
    // 1.存储所有全局数据，可以把state理解为data,声明变量；mutations理解为method，声明方法
    state:{// 状态管理
        isLogin:true,
        num:2,
        num2:3
    },
    // 2.需要通过计算获取state里的内容获取的数据，只能读取不可修改
    getter:{
        tols:(state) => state.num+state.num2
    },
    // 3.定义对state的各种操作
      // why不直接实现在mutation里需要写到action里?
      // mtations不能执行异步操作。aq:从云端获取信息-->(等待云端反馈)更新到state异步操作
      // 因此说:对于异步操作需要放到action里，简单的直接赋值操作可以直接放到mutation里
    mutations:{// 模板通过commit提交修改state里面的数据
        sub(state,content){//第1是state状态状态数据，第2是commit提交收到的数据
            state.num=content+1
        }
    },
    // 4、定义对state的各种操作
      // actions无法直接修改state，需要在mutations里更新
      // mutation不支持异步，所以需要在action里写api到url
    actions:{// Actions异步处理操作
        updatenum({commit},content) {
          commit('sub', content)
        }
    },
    modules:{// 模块划分，内容太多不会显得很臃肿。
        user
    }
}

VUE单文件

<template>
<!-- 模板中直接使用状态 -->
    <div>{{$store.state.num}}</div>
    <button @click="$store.state.num++">{{ $store.state.num }}</button>
    <button @click="add()">add</button>
    <h3>使用 getter 中的计算属性购物车的总价：{{$store.getters.tols}}</h3>
</template>
<script setup>
import { useStore } from 'vuex'//引入vuex
const store = useStore()
function add(){
    //选项式写法
    //this.$store.commit('sub',555)//提交vuex的mutation里面的sub方法，第二个参数提交的数据。
    //this.$store.dispatch('demo', {count:88, name:'vuex'});//提交vuex的actions里面的sub方法，第二个参数提交的数据。
    //组合式api，setup语法糖写法
    /************* 不开启命名空间 *************/
    //mutations 方法调用
    store.commit('sub','参数')
    store.commit('user/sum', num) // 参数带上模块名称
    //actions 方法调用
    store.dispatch('方法名'','参数')
    store.dispatch('updatenum',99)
    store.commit('updateUser',{id:10,username:'张工'})//调用模块的方法
    store.state.user.username//调用模块的状态
    //getters 计算方法只读调用
    store.getters.tols.
    /************* 开启命名空间 *************/
    store.commit('user/updateUser',{id:10,username:'张工'})// 参数带上模块名称
    store.dispatch('user/sum_actions', sum)
}
</script>

【感谢数据中台厂商龙石数据为本站提供 http://www.longshidata.com/pages/government.html,，感恩 】