目录
一、概念和作用解析
官方文档:https://vuex.vuejs.org/zh/
Vuex:
- Vuex是一个专门为vue.js开发的状态管理模式
- 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生改变;
状态管理:
- 把需要多个组件共享的变量全部存储在一个对象里;
- 这个对象放在顶层的Vue实例中,让其他组件可以使用;
一般需要管的状态:
- 用户的登录状态、头像、地理位置等等
- 商品的收藏、购物车的物品等等
二、基本使用
npm install --save vuex
在src/store下配置文件
index.js
在main.js中使用
我们可以在store/index.js中注册全局状态:
在任意一个组件中使用状态:
三、vuex-devtools和mutation
相当于一个日志记录
安装:
我的Chrome安装了也用不了,不知道为嘛子
修改全局状态,在mutations中定义方法:
调用方法使用this.$store.commit(‘方法名’)
四、getters的使用
类似computed计算属性
使用:
getters作为参数和传递参数:
作为参数:
getteers默认是不能传递参数的,如果希望传递参数,那么只能让getters本身返回另一个函数
五、mutation的携带参数
Vuex的store状态更新的唯一方式:提交Mutation
mutation主要包括两部分:
- 字符串的事件类型(type)
- 一个回调函数(handler),该回调函数的第一个参数就是state
带参数传递的Mutation:
调用:
参数被称为mutation的载荷(Payload),多个参数时,我们可以以对象的形式传递
还可以用一种包含type属性的对象的方式提交
六、Mutation的响应式规则
- 必须提前在store中初始化好所需的属性,这些属性都会被入到响应式系统中(deps),响应式系统会监听属性的变化,当属性发生变化时,会通知所有界面中用到该属性的地方(watcher),让界面发生更新。
- 如果要给state中的对象添加新的属性时,用这两种方式:
1、通过Vue.set()方法
2、用新对象给旧对象重新赋值
七、Mutation的类型常量
定义常量映射
定义时使用常量
import {INCREMENT} from './mutation-types'
调用时使用常量
import {INCREMENT} from './store/mutation-types'
八、Action的使用
定义action
//异步操作
actions: {
//context:上下文,这里等同于store
updateCounter(context) {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000)
}).then(() => {
//错误代码 不要直接修改state的属性
//context.state.counter += 1
context.commit({
type:INCREMENT,
num:1
})
})
}
},
调用action
methods:{
add(num){
this.$store.dispatch('updateCounter')
},
简单的回调
更加优雅的回调
在调用时调用then
九、modules
解决state过于臃肿,可以在modules中定于store模块,每个模块中拥有自己的state、muattaion等等
定义模块:
const mudoleA = {
state:{
name:'马飞飞'
}
}
modules: {
mudoleA,
}
使用模块:
十、store文件夹的目录组织
将属性抽离出去。