一篇文章概述Vue全家桶之Vuex基础学习

Vuex学习

什么是Vuex？

官方文档：Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库 。它采用 集中式 存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

   Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。一般情况下，只有组件之间共享的数据才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。当然所有的数据也可以都存在Vuex中。
   使用 Vuex 的好处：①能够在vuex中集中管理共享的数据，易于开发和后期维护；②能够高效地实现组件之间的数据共享，提高开发效率；③存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

Vuex核心概念—State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的State中进行存储。存储在Vuex中的数据和Vue实例中的 data 遵循相同的规则。

<!-- store/index.js -->
export default new Vuex.Store({
     // Vue2.x写法,Vue3.x是：export default createStore({  })
	state: () => ({
   
		count: 521,
		age: 18
	}),
})

数据访问方式

  所有组件可以通过两种方式进行访问这些数据。方式一：通过 this.$store.state.[全局数据名称] 来访问；方式二：从Vuex中导入 mapState 函数，然后通过该函数将当前组件需要的数据映射为当前组件的计算属性。当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。这种方式在组件需要多个数据时较为方便。

<!-- ①方式一：通过 this.$store.state.[全局数据名称] 来访问,this在该template中可以省略 -->
<template>
<div><p>count的值是: {
   {
    $store.state.count }}</p></div>
</template>

<!-- ②方式二：从Vuex中导入 `mapState` 函数，然后通过该函数将当前组件需要的数据映射为当前组件的计算属性 -->
<template>
<div><p>count的值是: {
   {
    count }}，年龄是: {
   {
    age }}</p></div>
</template>
<script>
import {
    mapState } from 'vuex'
export default {
   
    computed: mapState([
        'count',
        'age'
    ])
}
</script>

注意：mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要将多个对象合并为一个，以使我们可以将最终对象传给计算属性，因此我们可以使用对象展开运算符—— ... 。

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

Vuex核心概念—Getter

  Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 用于对 Store 中的数据进行加工处理形成新的数据，不会更改store中的数据。Store中数据发生变化，Getter的数据也会跟着变化。

getters: