状态管理模式+库: 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
即帮助我们管理共享状态
1、Vuex的状态存储是响应式的,当store中的状态state发生变化,相应的组件也会相应地得到高效更新
2、不能直接改变store的状态state,改变store状态的唯一方法就是提交commit mutation
3、action通过调用mutation来更改状态
4、getter存放公共函数供组件调用,类似计算属性computed
5、store.subscribe(listener(function)) 添加一个变化监听器,每当dispatch action的时候都会执行的回调listener(function)
6、自带一个日志插件用于一般的调试 createLogger,logger插件会生成状态快照,所以仅在开发环境中使用
7、开发环境中开启严格模式,在创建store时传入strict:true。在发布环境下关闭严格模式。 “strict: process.env.NODE_ENV !== 'production' ”
组合式API:
调用useStore函数,在setup中访问store,相当于选项式API的this.$store
核心概念
表单处理
<input v-model="obj.message"> 当用户输入时,v-model会试图直接修改obj.message,而状态的修改需要在mutation
所以可以使用setter双向绑定计算属性,在set函数中提交
<input v-model="message">
computed:{ message:{ set(value) { this.$store.commit('type',value) } } }
项目结构
- 应用层级的状态应该放在单个store对象中,每个应用将仅仅包含一个store实例(单一状态树)
- 提交mutation是更改状态的唯一办法,且这个过程是同步的
- 异步逻辑都应该放在action里