51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Vue教程(3)- 状态管理Vuex

# 1、构造器选项 {#_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 上的插件方法

# 2、Vuex.Store实例属性和方法 {#_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

# 3、辅助函数 {#_3、辅助函数}

mapState
mapGetters
mapActions
mapMutations
createNamespacedHelpers

# 4、项目结构 {#_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   # 产品模块

# 5、其他 {#_5、其他}

// 插件
const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

// 内置 Logger 插件
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
  plugins: [createLogger()]
})

开启严格模式:无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。

const store = new Vuex.Store({
  // ...
  strict: true
})
赞(0)
未经允许不得转载:工具盒子 » Vue教程(3)- 状态管理Vuex