Vuex.md · qingzhu/docs

# Vuex

![image-20200724145848615](Vuex.assets/image-20200724145848615.png)

> - **state**，驱动应用的数据源；
> - **view**，以声明方式将 **state** 映射到视图；
> - **actions**，响应在 **view** 上的用户输入导致的状态变化。

**多个组件共享状态**

![image-20200724150004859](Vuex.assets/image-20200724150004859.png)

## 基本使用

```
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({ ...options })
```

> 为了在 Vue 组件中访问 `this.$store` property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 `store` 选项的方式“注入”该 store 的机制

```
new Vue({
  el: '#app',
  store: store,
})
```

> 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的**状态 (state)**。
>
> 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
> 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。

## Vuex.Store 构造器选项

```
const store = new Vuex.Store({

state: {
    	// 类似 new Vue({...})中的 data
    },
    mutations: {
    	// 修改state中值  commit显示提交
    },
    getters: {
        // 类似 new Vue({...})中的computed计算方法
    },
    actions: {
        // dispatch，获取数据 -> commit，显示提交，修改state的值
    },
    modules: {
        // 子模块 {modulesA:{...}},每个子模块都有state,mutations,getters,actions,modules
    }

})
```

### state

- 类型: `Object | Function`

Vuex store 实例的根 state 对象。

```
  state: {
  	count: 0
  }
  ```

### mutations

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

在 store 上注册 mutation，处理函数总是接受

> `state` 作为第一个参数（如果定义在模块中，则为模块的局部状态）
  >
  > `payload` 作为第二个参数（可选）。

通过*`store.commit('increment')`*触发

```
  mutations: {
      increment (state) {
          // 变更状态
          state.count++
      }
  }
  ```

### actions

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

在 store 上注册 action。处理函数总是接受

> `context` 作为第一个参数，与 `store` 实例具有**相同方法和属性**
  >
  > `payload` 作为第二个参数（可选）。

通过*`store.dispatch('increment')`*触发

`context` 对象包含以下属性：

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

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

```
  actions: {
      increment (context) {
      	context.commit('increment')
      }
  }
  // ES2015 的参数解构来简化代码 const {commit} = context
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
  ```

### getters

- 类型: `{ [key: string]: Function }`

在 store 上注册 getter，getter 方法接受以下参数：

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

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

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

注册的 getter 暴露为 `store.getters`。

### modules

- 类型: `Object`

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

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

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

## 辅助函数

### mapState

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

为组件创建计算属性以返回 Vuex store 中的状态。返回的是一个 Object

> 第一个参数是可选的，可以是一个命名空间字符串。
>
> 对象形式的第二个参数的成员可以是一个函数。function(state: any)

```
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

// 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

// 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
```

```
// 映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])
```

**如何将它与局部计算属性混合使用- 对象展开运算符** `...mapState({...})`

```
computed: {
  localComputed () { /* ... */ },
  
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
```

### mapGetters

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

为组件创建计算属性以返回 getter 的返回值。**仅仅是将 store 中的 getter 映射到局部计算属性**

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

```
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
```

如果你想将一个 getter 属性另取一个名字，使用对象形式：

```
...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
```

### mapActions

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

创建组件方法分发 action。

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

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

```
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

// `mapActions` 也支持载荷：将`this.incrementBy(amount)` 映射为  
      //  `this.$store.dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}
```

### mapMutations

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

创建组件方法提交 mutation。

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

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

```
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

// `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}
```

### createNamespacedHelpers

createNamespacedHelpers(namespace: string): Object

创建基于命名空间的组件绑定辅助函数。其返回一个包含 mapState、mapGetters、mapActions 和 mapMutations 的对象。它们都已经绑定在了给定的命名空间上。

qingzhu/docs

简介

发行版

贡献者

近期动态

qingzhu/docs .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

qingzhu/docs