1、Vuex的基本介绍
1.1Vuex是做什么的
官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式。
- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试。
状态管理到底是什么?
- 简单的将其看成把需要多个组件共享的变量全部存储在一个对象里。
- 然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。
Vuex可以做到响应式
1.2管理什么状态?
- 可用于管理登录状态,用户名称、头像、地理位置,商品的收藏,购物车的物品等。
- 这些状态信息,可以放在统一的地方,对它进行保存和管理,而且它们是响应式的。
1.3为什么组件不能直接修改store状态
- 直接修改无法跟踪state的状态修改
- 数据响应式
- Devtools:Vue开发的浏览器插件,帮忙记录每次修改state的状态
- 同步: 组件 -> mutations -> state (actions可省略)
- 异步: 组件 ->actions(执行异步操作)-> mutations -> state
2、Vuex核心概念
- State:保存共享状态的地方,单一状态树
- Getters:类似组件中的计算属性
- Mutation:修改State状态
- Action:主要做一些异步操作
- Module:专门划分一些模块,针对不同模块,再对相关数保存
2.1state单一状态树
- 解释:单一数据源
- 方便管理
2.2Getters的基本使用
//在store中定义 getters:{ powerCounter(state) { //counter的平方 return state.counter * state.counter }, more20stu(state) { // 返回年龄大于20的学生 return state.students.filter(s => s.age > 20) more20stuLength(state, getters) { // 获取年龄大于20的学生数量 return getters.more20stu.length }, moreAgeStu(state) { return function (age) { //调用传参 return state.students.filter(s => s.age > age) } } } // 数据调用 $store.getters.powerCounter //传递参数 $store.getters.moreAgeStu(age) //传递参数
2.3Mutations状态更新
1、Vuex的store状态更新的唯一方式:提交Mutations
2、Mutations主要包括两部分:1、字符串的事件类型(type);2、一个回调函数(handler),该回调函数的第一个参数就是state
3、Mutations传递参数,参数被称为是mutation的载荷(Payload)
// 带参 mutations: { addCount(state, count) { state.counter += count } } this.$store.commit('addCount', count)
4、mutations的提交风格
// 方式一:普通提交风格 this.$store.commit('addCount', count) // 方式二,包含type属性的对象 this.$store.commit({ type: 'addCount', count }) addCount(state, payload) { state.counter += payload.count }
5、Mutations的响应规则
Vuex的store中的state是响应式的,当state中的数据发生变化时,Vue组件会自动更新
这就要求我们必须遵守一些Vuex对应的规则:
(1)、提前在store中初始化所需的属性;
(2)、当给state中的对象添加新属性时,使用下面的方式
方式一:使用Vue.set(obj, 'newProp', 123)
Vue.set(state.info, 'height', 1.8)
- 方式二:用新对象给旧对象重新赋值
state.info = {...state.info, 'height', 1.88}
- Vue.delete(obj, 'propName')// 删除属性,响应式
6、Mutations的类型常量
- 为了使用者花费大量的精力去记住方法名,甚至是多个文件间来回切换,查看方法名称,避免写错方法名
import {INCREMENT} from '文件路径' mutations: { ['test'](state) { //可使用这种方式定义方法名 }, [INCREMENT](state) { //使用常量名作为方法名 } }
export default //使用default导出的对象才能使用:import 自定义名字 from ‘文件路径’ export const A //只能使用 import {A} from '文件路径'
7、mutations同步函数
- 通常情况下,Vuex要求我们Mutation中的方法必须是同步方法,主要原因是,devtools可以帮助我们捕捉mutation的快照,但如果是异步操作,那么dectools将不能很好的追踪这个操作什么时候会被完成
2.4Actions的使用详解
- 异步方法在actions中实现
mutations; { updateInfo( { // 同步方法 }) } actions: { // context上下文, payload参数 aUpdateInfo(context, payload) { //异步方法 // 方式一 setTimeout(() => { context.commit('updateInfo') // 调用mutations中的updateInfo console.log(payload.message) //调用参数 payload.success() // 调用回调 }, 1000) // 方式二 return new Promise((resolve, reject) => { setTimeout(() => { context.commit('updateInfo') // 调用mutations中的updateInfo console.log(payload) resolve('11111') }, 1000) }) } } // 调用 updateInfo() { // 调用action方式一 this.$store.dispatch('aUpdateInfo', { message: '我是payload', success: () => { console.log('action里面已经完成') } }) //调用actions中的aUpdateInfo方法 //调用action方式二 this.$store .dispatch('aUpdateInfo', '我是payload') .then(res => { console.log('里面完成了提交') console.log(res) }) }
2.5modules的使用详解
- Vue使用单一状态树,意味着很多状态都会交给Vuex来管理
- 当应用变得非常复杂时,store对象就有可能变得相当臃肿
- 为了解决这个问题,Vuex允许将store分割成模块(Module),而每个模块拥有自己的state、mutations、actions、getters
const moduleA = { atore: { name: '我是a模块' }, mutation: { }, actions: { }, getters: { } } modules: { a: moduleA b: { // 省略... } } //页面调用 $store.state.a.name this.$store.commit('updateInfo', 'list')
名词解释:对象的解构,数组的结构
// 对象的解构 const obj = { name: 'chuan' age: 2, height: 1.88 } const a = {age, height, name} = obj // 根据名字对应,不是根据顺序 // 数组的解构 const names = ['kobe', 'curry', 'james'] const allNames[name1, name2, name3] = names