Vue教程(3)- 状态管理Vuex
# 1、构造器选项
import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })
state: Object | Function # 用来数据共享数据存储
getters: { [key: string]: Function } # 用来对共享数据进行过滤操作
mutations: { [type: string]: Function } # 用来注册改变数据状态
actions: { [type: string]: Function } # 解决异步改变共享数据
modules: Object # 包含了子模块的对象,会被合并到 store
plugins: Array<Function> # 一个数组,包含应用在 store 上的插件方法
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2、Vuex.Store实例属性和方法
state: Object
getters: Object
commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object) # 提交 mutation
dispatch(type: string, payload?: any, options?: Object)
dispatch(action: Object, options?: Object) # 分发 action
replaceState(state: Object) # 替换 store 的根状态
watch(fn: Function, callback: Function, options?: Object): Function # 监听
subscribe(handler: Function): Function # 订阅 store 的 mutation
subscribeAction(handler: Function): Function # 订阅 store 的 action
registerModule(path: string | Array<string>, module: Module, options?: Object) # 注册一个动态模块
unregisterModule(path: string | Array<string>) # 卸载一个动态模块
hotUpdate(newOptions: Object) # 热替换新的 action 和 mutation
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3、辅助函数
mapState
mapGetters
mapActions
mapMutations
createNamespacedHelpers
1
2
3
4
5
2
3
4
5
# 4、项目结构
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 5、其他
// 插件
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
})
}
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// 内置 Logger 插件
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
1
2
3
4
5
2
3
4
5
开启严格模式:无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。
const store = new Vuex.Store({
// ...
strict: true
})
1
2
3
4
2
3
4
上次更新: 2021-05-10 14:08:54