API 参考

商店

createStore

createStore<S>(options: StoreOptions<S>): Store<S>

创建一个新的商店。

import { createStore } from 'vuex'

const store = createStore({ ...options })

商店构造函数选项

state

type: Object | Function
Vuex 商店的根状态对象。详情
如果你传递一个返回对象的函数，则返回的对象将用作根状态。当你想重用状态对象，尤其是模块重用时，这很有用。详情

mutations

type: { [type: string]: Function }
在商店上注册 mutations。处理函数总是接收 state 作为第一个参数（如果在模块中定义，将是模块本地状态），如果存在，则接收第二个 payload 参数。
详情

actions

type: { [type: string]: Function }

在商店上注册 actions。处理函数接收一个 context 对象，该对象公开以下属性

{
  state,      // same as `store.state`, or local state if in modules
  rootState,  // same as `store.state`, only in modules
  commit,     // same as `store.commit`
  dispatch,   // same as `store.dispatch`
  getters,    // same as `store.getters`, or local getters if in modules
  rootGetters // same as `store.getters`, only in modules
}

如果存在，它还接收第二个 payload 参数。

详情

getters

type: { [key: string]: Function }

在商店上注册 getters。getter 函数接收以下参数

state,     // will be module local state if defined in a module.
getters    // same as store.getters

在模块中定义时特定

state,       // will be module local state if defined in a module.
getters,     // module local getters of the current module
rootState,   // global state
rootGetters  // all getters

注册的 getters 在 store.getters 上公开。

详情

modules

type: Object
一个包含要合并到商店中的子模块的对象，其形状为
```
{
  key: {
    state,
    namespaced?,
    mutations?,
    actions?,
    getters?,
    modules?
  },
  ...
}
```
每个模块都可以包含 state 和 mutations，类似于根选项。模块的状态将使用模块的键附加到商店的根状态。模块的 mutations 和 getters 仅接收模块的本地状态作为第一个参数，而不是根状态，并且模块 actions 的 context.state 也将指向本地状态。
详情

plugins

type: Array<Function>
要应用于商店的插件函数数组。插件只接收商店作为唯一参数，并且可以监听 mutations（用于出站数据持久性、日志记录或调试）或调度 mutations（用于入站数据，例如 WebSockets 或可观察对象）。
详情

strict

type: boolean
default: false
强制 Vuex 商店进入严格模式。在严格模式下，对 Vuex 状态的任何 mutation，如果不在 mutation 处理程序之外，都会抛出错误。
详情

devtools

type: boolean
为特定的 Vuex 实例打开或关闭 devtools。例如，传递 false 会告诉 Vuex 商店不要订阅 devtools 插件。当你在单个页面上有多个商店时很有用。
```
{
  devtools: false
}
```

商店实例属性

state

type: Object
根状态。只读。

getters

type: Object
公开注册的 getters。只读。

商店实例方法

commit

commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)

提交一个 mutation。options 可以有 root: true，它允许在命名空间模块中提交根 mutations。详情

dispatch

dispatch(type: string, payload?: any, options?: Object): Promise<any>
dispatch(action: Object, options?: Object): Promise<any>

调度一个 action。options 可以有 root: true，它允许在命名空间模块中调度根 actions。返回一个 Promise，该 Promise 解析所有触发的 action 处理程序。详情

replaceState

replaceState(state: Object)

替换商店的根状态。仅用于状态水合/时间旅行目的。

watch

watch(fn: Function, callback: Function, options?: Object): Function

对 fn 的返回值进行响应式观察，并在值更改时调用回调。fn 接收商店的状态作为第一个参数，getters 作为第二个参数。接受一个可选的选项对象，该对象采用与 Vue 的 vm.$watch 方法相同的选项。

要停止观察，请调用返回的 unwatch 函数。

subscribe(handler: Function, options?: Object): Function

订阅商店 mutations。handler 在每次 mutation 后被调用，并接收 mutation 描述符和 mutation 后状态作为参数。

const unsubscribe = store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

// you may call unsubscribe to stop the subscription
unsubscribe()

默认情况下，新的处理程序将添加到链的末尾，因此它将在之前添加的其他处理程序之后执行。这可以通过将 prepend: true 添加到 options 来覆盖，这将把处理程序添加到链的开头。

store.subscribe(handler, { prepend: true })

subscribe 方法将返回一个 unsubscribe 函数，该函数应该在不再需要订阅时调用。例如，你可能订阅了一个 Vuex 模块，并在注销模块时取消订阅。或者你可能从 Vue 组件内部调用 subscribe，然后稍后销毁组件。在这些情况下，你应该记住手动取消订阅。

最常用于插件。详情

subscribeAction

subscribeAction(handler: Function, options?: Object): Function

订阅商店 actions。handler 针对每个分派的 action 被调用，并接收 action 描述符和当前商店状态作为参数。subscribe 方法将返回一个 unsubscribe 函数，该函数应该在不再需要订阅时调用。例如，在注销 Vuex 模块或在销毁 Vue 组件之前。

const unsubscribe = store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

// you may call unsubscribe to stop the subscription
unsubscribe()

store.subscribeAction(handler, { prepend: true })

subscribeAction 方法将返回一个 unsubscribe 函数，该函数应该在不再需要订阅时调用。例如，你可能订阅了一个 Vuex 模块，并在注销模块时取消订阅。或者你可能从 Vue 组件内部调用 subscribeAction，然后稍后销毁组件。在这些情况下，你应该记住手动取消订阅。

subscribeAction 还可以指定订阅处理程序是否应该在 action 分派之前或之后调用（默认行为是之前）

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

subscribeAction 还可以指定一个 error 处理程序来捕获在分派 action 时抛出的错误。该函数将接收一个 error 对象作为第三个参数。

store.subscribeAction({
  error: (action, state, error) => {
    console.log(`error action ${action.type}`)
    console.error(error)
  }
})

subscribeAction 方法最常用于插件。详情

registerModule

registerModule(path: string | Array<string>, module: Module, options?: Object)

注册一个动态模块。详情

options 可以有 preserveState: true，它允许保留以前的状态。与服务器端渲染一起使用时很有用。

unregisterModule

unregisterModule(path: string | Array<string>)

注销一个动态模块。详情

hasModule

hasModule(path: string | Array<string>): boolean
检查具有给定名称的模块是否已注册。详情

hotUpdate

hotUpdate(newOptions: Object)

热插拔新的动作和变异。详情

组件绑定助手

mapState

mapState(namespace?: string, map: Array<string> | Object<string | function>): Object

创建返回 Vuex 存储子树的组件计算选项。详情

第一个参数可以是一个可选的命名空间字符串。详情

第二个对象参数的成员可以是一个函数。 function(state: any)

mapGetters

mapGetters(namespace?: string, map: Array<string> | Object<string>): Object

创建返回 getter 评估值的组件计算选项。详情

第一个参数可以是一个可选的命名空间字符串。详情

mapActions

mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object

创建分派动作的组件方法选项。详情

第一个参数可以是一个可选的命名空间字符串。详情

第二个对象参数的成员可以是一个函数。 function(dispatch: function, ...args: any[])

mapMutations

mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object

创建提交变异的组件方法选项。详情

第一个参数可以是一个可选的命名空间字符串。详情

第二个对象参数的成员可以是一个函数。 function(commit: function, ...args: any[])

createNamespacedHelpers

createNamespacedHelpers(namespace: string): Object

创建命名空间组件绑定助手。返回的对象包含 mapState、mapGetters、mapActions 和 mapMutations，它们与给定的命名空间绑定。详情

可组合函数

useStore

useStore<S = any>(injectKey?: InjectionKey<Store<S>> | string): Store<S>;

在 setup 钩子中调用时获取注入的存储。使用 Composition API 时，您可以通过调用此方法来检索存储。

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

TypeScript 用户可以使用注入键来检索类型化的存储。为了使这能够正常工作，您必须定义注入键并在将存储实例安装到 Vue 应用程序时将其与存储一起传递。

首先，使用 Vue 的 InjectionKey 接口声明注入键。

// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

然后，将定义的键作为 app.use 方法的第二个参数传递。

// main.ts
import { createApp } from 'vue'
import { store, key } from './store'

const app = createApp({ ... })

app.use(store, key)

app.mount('#app')

最后，您可以将键传递给 useStore 方法以检索类型化的存储实例。

// in a vue component
import { useStore } from 'vuex'
import { key } from './store'

export default {
  setup () {
    const store = useStore(key)

    store.state.count // typed as number
  }
}

API 参考 #

商店 #

createStore #

商店构造函数选项 #

state #

mutations #

actions #

getters #

modules #

plugins #

strict #

devtools #

商店实例属性 #

state #

getters #

商店实例方法 #

commit #

dispatch #

replaceState #

watch #

subscribe #

subscribeAction #

registerModule #

unregisterModule #

hasModule #

hotUpdate #

组件绑定助手 #

mapState #

mapGetters #

mapActions #

mapMutations #

createNamespacedHelpers #

可组合函数 #

useStore #

API 参考

商店

createStore

商店构造函数选项

state

mutations

actions

getters

modules

plugins

strict

devtools

商店实例属性

state

getters

商店实例方法

commit

dispatch

replaceState

watch

subscribe

subscribeAction

registerModule

unregisterModule

hasModule

hotUpdate

组件绑定助手

mapState

mapGetters

mapActions

mapMutations

createNamespacedHelpers

可组合函数

useStore