Vuex介绍和使用-4. state

State 是存储应用程序状态的对象。它是 Vuex store 的核心部分，包含了应用程序中的各种数据。

State 在 Vuex store 中充当单一数据源，即所有组件共享的数据中心。通过集中存储应用程序的状态，可以方便地管理和跟踪状态的变化，并确保状态的一致性。

state简单的说就是存放变量的地方，可以存字符串，对象、数组等

4.1. state使用示例

state中存放一个user对象

// 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  }
});

export default store

组件中展示store中的值

<template>
  <div>
    <div class="hello">{{ $store.state.user.name }}</div>
  </div>
</template>
<script>

  export default {
  }
</script>

页面显示

4.2. mapState使用

mapState 是 Vuex 提供的一个辅助函数，用于简化在组件中访问 Vuex store 中的状态（state）。它可以帮助你将 Vuex store 中的状态映射到组件的计算属性中，使得在组件中使用状态更加方便。

<template>
  <div>
    <div>{{ $store.state.user.name }}</div>
    <div>{{ user.name }}</div>
    <div>{{ userAlias.name }}</div>
    <div>{{ age }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },
    computed: mapState({
      // 箭头函数
      user: state => state.user,
      // 传字符串参数 'user' 等同于 `state => state.user`
      userAlias: 'user',
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      age (state) {
        return state.user.age + this.num
      }
    })
  }
</script>

4.3. …mapState

在 Vuex 中，…mapState 是一种 JavaScript 扩展语法，用于在组件中快速绑定 Vuex store 中的状态到计算属性。

具体而言，… 表示解构语法（destructuring syntax），而 mapState 是 Vuex 提供的辅助函数。当我们使用 …mapState 时，它会将 mapState 返回的对象展开，并将其中的属性和值分别添加到组件的计算属性中。

这种写法的好处在于它可以简化组件中的代码，避免了重复的代码和显式的属性赋值。通过使用 …mapState，我们可以将 Vuex store 中的状态快速映射到组件的计算属性，使得在组件中访问和使用状态变得更加方便和简洁。

…mapState示例：

<template>
  <div>
    <div>{{ user.name }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },

    computed: {
      // 对象展开运算符：将此对象混入到外部对象中
      ...mapState(["user"])
    }

  }
</script>

在上面的示例中，我们使用 …mapState 将 Vuex store 中的 user 状态映射到了组件的计算属性。这样在组件中我们可以直接使用 user,而不需要手动访问 this.$store.state.user

请注意，…mapState 仅仅是一种简写形式

你也可以选择使用完整的对象语法来手动映射状态到计算属性。

例如：

<template>
  <div>
    <div>{{ user.name }}</div>
    <div>{{ age }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },

    computed: {
      // 对象展开运算符：将此对象混入到外部对象中
      ...mapState({
        user: state => state.user,
        age: state => state.user.age
      })
    }

  }
</script>