Vuex是做什么的？ Vue官方：状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。 例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。 单页面的状态管理 View–>Actions—>State 视图层(view)触发操作(action)更改状态(state)响应回视图层(view) vuex（Vue3.2版本） store/index.js 创建store对象并导出store main.js 引入并使用 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 vue2 中可以通过 this.$store.xxx 的方式拿到 store 的实例对象。 vue3 中的 setup 在 beforecreate 和 created 前执行，此时 vue对象还未被创建，没有了之前的this，所以此处我们需要用到另一种方法来获取到 store 对象。 1. state 存放数据的地方 使用：使用方法大致与vue2.x中的版本相同，通过 $store.state.属性名 来获取state中的属性。 可以在 state 中直接进行数据变化的操作，但Vue不建议这么做。因为对于vue开发工具 devtools 来说，直接在state中进行数据改变，devtools是跟踪不到的。vuex中希望通过 action（进行异步操作）或是 mutations（同步操作）来进行数据改变的操作，这样在 devtools 中才能直接观察出数据的变化以及记录，方便开发者调试。 另外，在vue3 中对state 中对象新增属性或删除时，不再需要通过 vue.set() , 或是 vue.delete() 来进行对象的响应式处理了，直接新增的对象属性已经具有响应式。 2. mutations vuex的store状态更新的唯一方式：提交 mutation 同步操作可以直接在mutatuions中直接进行 mutions 主要包含2部分: 字符串的事件类型 (type)一个**回调函数（handler）**该回调函数的第一个参数是 state template 中通过 $store.commit('方法名') 触发 在 vue3.x 中需要拿到** store 实例的话，需要调用 useStore **这样一个函数，在 vuex 中导入 mution 的参数与传参方法 mution 接收参数直接写在定义的方法里边即可接受传递的参数 通过 commit 的payload 进行参数传递 使用 store.commit('mution中函数名', '需要传递的参数' ) 在commit里添加参数的方式进行传递 mution 的提交风格 前面提到了 mution 主要包含 type 和 回调函数 两部分, 和通过commit payload的方式进行参数传递（提交）,下面我们可以 用这种方式进行 mution 的提交 3. actions 异步操作在action中进行，再传递到mutation action基本使用如下： action 中定义的方法默认参数为** context 上下文**， 可以理解为 store 对象 通过 context 上下文对象，拿到store，通过 commit 触发 mution 中的方法，以此来完成异步操作 在template 中通过dispatch 调用action 中定义的sum_action 方法 通过 promise 实现异步操作完成，通知组件异步执行成功或是失败。 sun_action方法返回一个promise，当累加的值大于30时不再累加，抛出错误。 4. getters 类似于组件的计算属性 使用 通过$store.getters.方法名 进行调用 getters 的入参, getters 可以接收两个参数，一个是 state, 一个是自身的 getters ，并对自身存在的方法进行调用。 getters 的参数与传参方法 上面是getters固定的两个参数，如果你想给getters传递参数，让其筛选大于 age 的人，可以这么做 返回一个 function 该 function 接受 Age，并处理 使用 5. modules 当应用变得复杂时，state中管理的变量变多，store对象就有可能变得相当臃肿。 为了解决这个问题，vuex允许我们将store分割成模块化（modules），而每个模块拥有着自己的state、mutation、action、getters等 在store文件中新建modules文件夹 在modules中可以创建单一的模块，一个模块处理一个模块的功能 store/modules/user.js 处理用户相关功能 store/modules/pay.js 处理支付相关功能 store/modules/cat.js 处理购物车相关功能 最终通过 store/index.js 中进行引入 在template中模块中的写法和无模块的写法大同小异，带上模块的名称即可 总结 到此这篇关于Vue3中Vuex详细使用的文章就介绍到这了,更多相关Vue3中Vuex使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 您可能感兴趣的文章:vue3使用vuex实现页面实时更新数据实例教程(setup)Vue3中vuex的基本使用方法实例vue3中router路由以及vuex的store使用解析vue3中vuex与pinia的踩坑笔记记录vue3.2中的vuex使用详解