「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。

背景

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。当多个组件共享状态时，多个视图依赖于同一状态，来自不同视图的行为需要变更同一状态

核心概念

State

主要用来存储数据，存储状态
在根实例注册 store 后，通过this.$store.state 来访问，对应vue里面的data;
响应式存储数据，vue组件从store中读取数据，当数据发生变化的时候，组件也会随之更新;

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每当 store.state.count 变化的时候, 都会重新请求计算属性，并触发更新相关联的 DOM。 Vuex 通过 store 选项，提供了一种将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）的机制。

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 辅助函数

当一个组件需要获取多个状态的时候，如果把这些状态都声明为计算属性会显得重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数来帮我们生成计算属性。

// 在单独构建的版本中辅助函数为 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 属性。有了对象展开运算符，可以简化写法。

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

组件仍然保有局部状态

使用 Vuex 并不代表你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更简单和调试，但也会使代码变得冗长和不直观。如果有些状态只属于单个组件，最好还是作为组件的局部状态来使用更多。