Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态
,并以相应的规则保证状态以一种可预测的方式发生变化。
一、目录结构
1 | demo/ |
二、版本依赖
vite
: ^2.0.0vue
: ^3.2.8vuex
: ^4.0.0
三、配置Vuex
为了避免所有状态集中到一个对象或一个文件而变得臃肿,所以会按照不同的产品或业务线将状态树切割成多个 模块 (
module
),并配置各自的 命名空间 (namespaced
),防止状态重复冲突。
- 3-1.配置
src/store/index.js
文件。
1 | // src/store/index.js |
- 3-2.配置
src/store/modules/user.js
文件。
1 | // src/store/modules/user.js |
- 3-3.在
src/main.js
入口文件中注册使用Vuex
。
1 | // src/main.js |
四、使用Vuex
- 这里主要介绍一下在
Vue3
的Composition API
中的使用。
1 | // src/views/index.vue |
提示: 为了访问 state
和 getter
,需要创建 computed
引用以保留响应性
,这与在 Options API 中创建计算属性
等效。
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理(本文)
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-12-06
最后更新: 2022-12-07
本文标题: Vue3学习与实战 · Vuex状态管理
本文链接: https://www.tiven.cn/p/de821c2f/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-12-06
最后更新: 2022-12-07
本文标题: Vue3学习与实战 · Vuex状态管理
本文链接: https://www.tiven.cn/p/de821c2f/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!