Vuex

89 阅读1分钟

状态管理模式+库: 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

即帮助我们管理共享状态

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

核心概念

Vuex.png

表单处理

<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里

image2022-9-28_15-30-25.png