【Vue 全家桶】5、Vuex（更新中）

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。使用 Vuex 可以帮助管理那些需要跨多个组件共享的状态，或者处理一些复杂的用户交互逻辑。

核心概念

• State：
  State 就是应用的状态树。它是一个对象，包含了应用中所有组件的状态数据。通过 store.state 可以访问这些状态。

• Getter：
  Getter 类似于 Vue 组件中的计算属性。它是 store 中的一个方法，用于从 state 中派生出一些状态，比如对列表进行过滤或计算总和等。Getter 接收 state 作为其第一个参数。

• Mutation：
  Mutation 是唯一改变 store 中状态的方法。每一个 mutation 都有一个字符串的事件类型 (type) 和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，且它会接受 state 作为第一个参数，以及可选的额外参数（通常称为 payload，负载）。

• Action：
  Action 类似于 mutation，但不同的是：
  Action 提交的是 mutation，而不是直接变更状态。
  Action 可以包含任意异步操作。
  Action 函数接收一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

• Module：
  当应用变得非常大时，将所有的状态放在一个 store 文件中可能会导致难以维护。为了帮助解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块。

何时使用

搭建vuex环境

基本使用

• store
• dispatch、commit

getter的使用

四个map方法的使用

mapState、mapGetters、mapMutations、mapActions

import { mapMutations } from 'vuex';

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

vuex模块化+命名空间

const countOptions = {
	namespaced: true, // 开启命名空间
	actions:{},
	mutations:{},
	state:{},
	getters:{}
}

const personOptions = {
	actions:{},
	mutations:{},
	state:{},
	getters:{}
}

export default new Vuex.Store({
	modules:{
		countOptions
		personOptions
	}
})

mapState('countOptions',[''])