Vuex用过么,怎么理解
- Vuex是一个专门为Vue.js应用程序开发的状态管理模式 + 库
- 核心概念名称和作用:store/State/Mutation/Action/Module
store
是个大容器,包含以下所有内容。State
用来读取状态,带有一个mapState
辅助函数。Getter
用来读取派生状态(即计算状态),附有一个mapGetters
辅助函数。Mutation
用于同步提交状态变更,附有一个mapMutation
辅助函数。Action
用于异步变更状态,但它提交的是mutation
,而不是直接变更状态,附有一个mapActions
辅助函数。Module
用来给store
划分模块,方便维护代码。
常见追问:Mutation
和 Action
为什么要分开?
答案:为了让代码更易维护。(可是Pinia就把 Mutation
和 Action
合并了,这样是为了减少一个概念,更方便于代码理解)
关于Pinia的内容
- 使用
defineStore
定义一个Store,第二个参数接受 Setup 函数或 Option 对象。 - 从Store解构需要使用
storeToRefs
,避免破坏响应式。 - 变更
state
状态:- 访问
state
:直接使用实例store.xxx
- 重置
state
:$reset
- 替换
state
:$patch
- 订阅
state
:$subscribe
和 Vuex的订阅类似。
- 访问
- 选项式API和SetupStores写法有区别。
store
是一个用reactive
包装的对象,这意味着不需要在getters
后面写.value
。
参考链接