#Store：vuex 3.1X

程序员xiaolibao

已于 2024-01-18 16:18:08 修改

阅读量420

点赞数 13

分类专栏： #Store篇文章标签： vuex

于 2024-01-12 17:33:27 首次发布

前端xiaolibao

本文链接：https://blog.csdn.net/weixin_47075554/article/details/135558533

版权

#Store篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#Store3.1X

state

类型: Object | Function

Vuex store 实例的根 state 对象。详细介绍

如果你传入返回一个对象的函数，其返回的对象会被用作根 state。这在你想要重用 state 对象，尤其是对于重用 module 来说非常有用。详细介绍

getters

类型: { [key: string]: Function }
相当于计算属性 -----------------有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
在 store 上注册 getter，getter 方法接受以下参数：

state,     // 如果在模块中定义则为模块的局部状态
getters,   // 等同于 store.getters

当定义在一个模块里时会特别一些：

state,       // 如果在模块中定义则为模块的局部状态
getters,     // 等同于 store.getters
rootState    // 等同于 store.state
rootGetters  // 所有 getters

注册的 getter 暴露为 store.getters。

mutations

类型: { [type: string]: Function }
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象

在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。

payload 提交载荷

单个数据

mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

actions

类型: { [type: string]: Function }

在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。

context 对象包含以下属性：

{
  state,      // 等同于 `store.state`，若在模块中则为局部状态
  rootState,  // 等同于 `store.state`，只存在于模块中
  commit,     // 等同于 `store.commit`
  dispatch,   // 等同于 `store.dispatch`
  getters,    // 等同于 `store.getters`
  rootGetters // 等同于 `store.getters`，只存在于模块中
}

同时如果有第二个参数 payload 的话也能够接收。

modules

类型: Object

包含了子模块的对象，会被合并到 store，大概长这样：

{
  key: {
    state,
    namespaced?,
    mutations,
    actions?,
    getters?,
    modules?
  },
  ...
}

与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。

命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

mapGetters

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

为组件创建计算属性以返回 getter 的返回值。详细介绍

第一个参数是可选的，可以是一个命名空间字符串。详细介绍

mapState

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

为组件创建计算属性以返回 Vuex store 中的状态。详细介绍

第一个参数是可选的，可以是一个命名空间字符串。详细介绍

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

mapActions

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

创建组件方法分发 action。详细介绍

第一个参数是可选的，可以是一个命名空间字符串。详细介绍

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